Оптимизируйте S CSS в одно `@ media` или '@each'

Question

Я пытаюсь создать файл SASS (S CSS), который создает мои основные контейнеры. Я хотел бы уменьшить раздувание, используя @each или @mixin до l oop через каждый из размеров (xl, lg, md, sm, xs), а затем либо:

• Пропорционально уменьшает высоту элементов psuedo, начиная с наибольшего размера ответа в xl и спускаясь до xs, где это значение уменьшается до 0 при наименьшем размере ответа.

Или:

• Увеличение значение от 0 в наименьшем адаптивном размере в xs на 2 для каждого размера вверх, до самого большого адаптивного размера в xl.

Ожидаемый результат такой же, как показано ниже (хотя он будет приемлем для перекрытия размеры должны быть линейными, например, прямо сейчас адаптивные размеры в каждом размере контейнера начинаются и заканчиваются на 2rem меньше, чем предыдущий размер контейнера)

.container-xl {
  @extend %container;
  &::after,
  &::before {
    height: 14rem;
  }
  @media (max-width: $lg) {
    &::after,
    &::before {
      height: 12rem;
    }
  }
  @media (max-width: $md) {
    &::after,
    &::before {
      height: 10rem;
    }
  }
  @media (max-width: $sm) {
    &::after,
    &::before {
      height: 8rem;
    }
  }
}
.container-lg {
  @extend %container;
  &::after,
  &::before {
    height: 12rem;
  }
  @media (max-width: $lg) {
    &::after,
    &::before {
      height: 10rem;
    }
  }
  @media (max-width: $md) {
    &::after,
    &::before {
      height: 8rem;
    }
  }
  @media (max-width: $sm) {
    &::after,
    &::before {
      height: 6rem;
    }
  }
}
.container-md {
  @extend %container;
  &::after,
  &::before {
    height: 10rem;
  }
  @media (max-width: $lg) {
    &::after,
    &::before {
      height: 8rem;
    }
  }
  @media (max-width: $md) {
    &::after,
    &::before {
      height: 6rem;
    }
  }
  @media (max-width: $sm) {
    &::after,
    &::before {
      height: 4rem;
    }
  }
}
.container-sm {
  @extend %container;
  &::after,
  &::before {
    height: 8rem;
  }
  @media (max-width: $lg) {
    &::after,
    &::before {
      height: 6rem;
    }
  }
  @media (max-width: $md) {
    &::after,
    &::before {
      height: 4rem;
    }
  }
  @media (max-width: $sm) {
    &::after,
    &::before {
      height: 2rem;
    }
  }
}
.container-xs {
  @extend %container;
  &::after,
  &::before {
    height: 6rem;
  }
  @media (max-width: $lg) {
    &::after,
    &::before {
      height: 4rem;
    }
  }
  @media (max-width: $md) {
    &::after,
    &::before {
      height: 2rem;
    }
  }
}

Answer 1

После небольшой работы я понял рабочую концепцию.

$xl: 1200px;
$lg: 1037px;
$md: 797px;
$sm: 615px;
$xs: 415px;
$query: "max-width:";
$breakpoints: "all" "" "", "(#{$query} #{$xl})" "xl-" "-xl",
  "(#{$query} #{$lg})" "lg-" "-lg", "(#{$query} #{$md})" "md-" "-md",
  "(#{$query} #{$sm})" "sm-" "-sm", "(#{$query} #{$xs})" "xs-" "-xs";


$val: 21;
@each $i in $breakpoints {
  $val: $val - 1;
    .container#{nth($i, 3)} {

        &::after,
        &::before {
          height: #{$val}rem;
        }
        @media (max-width: $lg) {
          &::after,
          &::before {
             height: #{$val - 1}rem;
          }
        }
        @media (max-width: $md) {
          &::after,
          &::before {
               height: #{$val - 2}rem;
          }
        }
        @media (max-width: $sm) {
          &::after,
          &::before {
              height: #{$val - 3}rem;
          }
        }
      }
}