SASS Mixin 帮助 - 断点答案

【问题标题】：SASS Mixin Help - BreakpointSASS Mixin 帮助 - 断点
【发布时间】：2019-03-17 08:59:09
【问题描述】：

尝试自定义以下 SASS mixin。现在它正在为每个断点创建相同的 CSS 集，但是，当我到达“sm”和“xs”断点时，我希望 mixin 稍微改变代码（参见下面的代码更改）。

$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 !default;

@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});

        &.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));

【问题讨论】：

标签： sass breakpoints mixins scss-mixins breakpoint-sass

【解决方案1】：

最简单的解决方案是将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)
) !default;

您现在可以包含这个新值作为参数：

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

并像这样使用它：

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

You can see the full code here.

【讨论】：