Question

在Sass中有没有办法用连字符分割变量/类的列表？
这是一个模糊的问题标题，所以我最好展示我想要实现的目标。

在下面的示例中，我正在尝试创建一些可以应用于HTML元素的实用程序类，以帮助实现垂直节奏。

例如，我可能想给元素一个小的余量，这与我的垂直节奏策略一致，因此我将添加类.m-t-s（代表margin-top-small）。

然后，我想针对每个用于细粒度控制的媒体查询输出这些实用程序类的版本，例如：我可能想要一个类.m-t-s-768，当最小视口宽度为768px时，它会添加一个小的上边距。

我已经在下面实现了这一点，但这是一种非常冗长且重复的方式。任何人都可以建议更简洁的方式吗？

Variables
––––––––––
$mediaQueries-px:
640,
768,
1024
;

$s: 20px; /* FYI I've simplified these examples for the sake of demonstration, normally I use something like ($baseLineHeight / 1.5) + rem */
$m: 50px;
$l: 60px;

Creating the classes
–––––––––––––––––––––
.m-t-s {
  margin-top: $s;
}

/* Create versions for each defined media query */
@each $mediaQuery in $mediaQueries-px {
  @media screen and (min-width: ($mediaQuery / 16px)) {
    .m-t-s-#{$mediaQuery} {
      margin-top: $s;
    }
  }
}

.m-t-m {
  margin-top: $m;
}

/* Create versions for each defined media query */
@each $mediaQuery in $mediaQueries-px {
  @media screen and (min-width: ($mediaQuery / 16px)) {
    .m-t-m-#{$mediaQuery} {
      margin-top: $m;
    }
  }
}

这也重复.m-t-l（margin top large），然后继续填充类（例如.p-t-s等等），因此它将成为一个很长的实用程序类列表。

Answer 1

要以编程方式生成输出，您需要另一个列表和内部循环：

$mediaQueries-px:
640,
768,
1024
;

$s: 20px;
$m: 50px;
$l: 60px;

$sizes: s $s, m $m, l $l;

@each $size in $sizes {
    .m-t-#{nth($size, 1)} {
      margin-top: nth($size, 2);
    }
}

@each $mediaQuery in $mediaQueries-px {
  @media screen and (min-width: ($mediaQuery / 16 * 1em)) { // modified for compilation purposes
    @each $size in $sizes {
        .m-t-#{nth($size, 1)}-#{$mediaQuery} {
          margin-top: nth($size, 2);
        }
    }
  }
}

输出：

.m-t-s {
  margin-top: 20px;
}

.m-t-m {
  margin-top: 50px;
}

.m-t-l {
  margin-top: 60px;
}

@media screen and (min-width: 40em) {
  .m-t-s-640 {
    margin-top: 20px;
  }

  .m-t-m-640 {
    margin-top: 50px;
  }

  .m-t-l-640 {
    margin-top: 60px;
  }
}
@media screen and (min-width: 48em) {
  .m-t-s-768 {
    margin-top: 20px;
  }

  .m-t-m-768 {
    margin-top: 50px;
  }

  .m-t-l-768 {
    margin-top: 60px;
  }
}
@media screen and (min-width: 64em) {
  .m-t-s-1024 {
    margin-top: 20px;
  }

  .m-t-m-1024 {
    margin-top: 50px;
  }

  .m-t-l-1024 {
    margin-top: 60px;
  }
}

拆分Sass中的变量列表

1 个答案: