SaSS 循环使用

我想创建类，将特定边距应用于我的块。例如：

 .standard-margin-top {margin-top:10px;}
 .standard-margin-bottom {margin-bottom: 10px;}
 .small-margin-top {...}

 ...

 .large-margin-left {...}

等等。共有20个班级（每个方向都有xs, small, standard, large and no）。是否可以用 sass 循环来简化它？我对此还很陌生。

我已经读过如何用数字创建循环，但我不知道我应该在这里做什么。

Thanks!

Use @each loop.

有两个尺寸和边距方向的集合：$sizes and $directions。然后我们使用@each循环遍历这些集合并生成 css 选择器。使用#{}以字符串形式插入变量值。

sassmeister 演示 http://www.sassmeister.com/gist/2196c39ac6acad3cec0357d8caeaab7e

$sizes: xs, small, standard, large, no;
$directions: top, right, bottom, left;

@each $size in $sizes {
  @each $direction in $directions {
    .#{$size}-margin-#{$direction} {
      margin-#{$direction}: 10px;
    }
  }
}