Variables 拆分Sass中的变量列表

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

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

例如，我可能想给一个元素一个小的边距，这与我的垂直节奏策略一致，因此我将添加class.m-t-s（代表边距顶部小）

然后，我想针对我用于细粒度控制的每个媒体查询输出这些实用程序类的版本，例如，我可能需要一个类

.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

也会重复（页边顶部大），然后对填充类（例如

.p-t-s

等等）继续进行，因此这是一个相当长的实用程序类列表。

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

$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;
  }
}

---

在你的HTML中有这么多的表示。你为什么要这样做？实际上，我更倾向于通过@extend将这些类拉入其他语义类，但如果需要，可以选择在元素上使用这些类，那就太好了。我不会对其他属性这样做，但边距和填充更为持久。对单个属性使用

@extend

可能会很快失控（请参阅：）您看到vw和vh单元了吗，嗯……我听说过vm单位，但不确定它们是否能帮助我获得一致的垂直节奏。感谢您的评论，我理解您对扩展单一属性选择器的担忧，但这是我正在努力实现的一件非常具体的事情，老实说，我认为这可能是值得的。我还很好奇在SASS中是否有一种更简洁的方法可以做到这一点，如果性能失控，我可能会重新评估是否有其他方法。啊，非常感谢cimmanon，太棒了。你最近回答了我的很多问题，我非常感激。