Блог

Пытаюсь настроить следующий SASS mixin. Прямо сейчас он создает один и тот же набор CSS для каждой точки останова, однако, когда я доберусь до точек останова «sm» и «xs», я хочу, чтобы при смешивании код немного изменился (см. Изменение кода ниже).

 $columns: 12;
$gutter: 40px;
$margin: 20px;
$max-width: 100%;

$breakpoints: lg 1199.98px 1200px,
md 991.98px 992px,
sm 767.98px 778px,
xs 575.98px 576px !defau<

@each $breakpoint in $breakpoints {
  $name: nth($breakpoint, 1);
  $size: nth($breakpoint, 2);
  $container: nth($breakpoint, 3);

  @media only screen and (max-width: $size) {
    .container {
      max-width: $container;
    }

    @for $i from 1 through $columns {
      .col-#{$name}-#{$i} {
        flex-basis: calc((100% / #{$columns} * #{$i}) - #{$gutter});
        max-width: calc((100% / #{$columns} * #{$i}) - #{$gutter});

        amp;.fluid {
          flex-basis: calc(100% / #{$columns} * #{$i});
          max-width: calc(100% / #{$columns} * #{$i});
          margin-left: 0;
          margin-right: 0;
        }
      }
    }
  }
}
  

В точках останова «sm» я хочу, чтобы он изменил формулу для чтения…

 flex-basis: calc((100% / #{$columns} * #{$i}) - (#{$gutter} / 2));
max-width: calc((100% / #{$columns} * #{$i}) - (#{$gutter} / 2));
  

В точках останова «xs» я хочу, чтобы он изменил формулу для чтения…

 flex-basis: calc((100% / #{$columns} * #{$i}) - (#{$gutter} / 3));
max-width: calc((100% / #{$columns} * #{$i}) - (#{$gutter} / 3));
  

Самым простым решением было бы передать gutter значение в качестве параметра в вашем @each directive .
Но, возможно, вы захотите сохранить глобальное gutter значение, поэтому вот альтернатива:

Во-первых, вы могли бы сократить это:

 @each $breakpoint in $breakpoints {
  $name: nth($breakpoint, 1);
  $size: nth($breakpoint, 2);
  $container: nth($breakpoint, 3);
  // ...
}
  

Этим:

 @each $name, $size, $container in $breakpoints {
  // ...
}
  

Затем вам нужно будет добавить новое значение в свой список. Она будет использоваться для разделения значения желоба.
Обратите внимание, что ваш список полностью корректен, но я бы посоветовал использовать следующий формат, который гораздо более удобочитаем.

 $breakpoints: (
  (lg, 1199.98px, 1200px, 1),
  (md, 991.98px, 992px, 1),
  (sm, 767.98px, 778px, 2),
  (xs, 575.98px, 576px, 3)
) !defau<
  

Теперь вы можете включить это новое значение в качестве параметра:

 @each $name, $size, $container, $divide in $breakpoints {
  // ...
}
  

И используйте ее следующим образом:

 flex-basis: calc((100% / #{$columns} * #{$i}) - #{$gutter} / #{$divide});
max-width: calc((100% / #{$columns} * #{$i}) - #{$gutter} / #{$divide});
  

Вы можете увидеть полный код здесь.