使用 @for 时对 Sass 选择器进行分组

Question

我有一组标题级别（1 到 6）。我正在使用@for 循环，但我似乎无法弄清楚如何将它们组合为一个而不是单独。

这是我正在使用的@for 循环：

@for $i from 1 through 6 {
   h#{$i},
   .h#{$i} {
      margin-bottom: $headings-margin-bottom;
      line-height: $headings-line-height;
      font-weight: $headings-font-weight;
      font-family: $headings-font-family;
   }
}

这是我所期待的：

h1,
h2,
h3,
h4,
h5,
h6 {
   /* styles */
}

这是正在编译的内容：

h1 {
   /* styles */
}

h2 {
   /* styles */
}

h3 {
   /* styles */
}

...

Answer 1

你可以使用@extend：

%myStyle {
  margin-bottom: $headings-margin-bottom;
  line-height: $headings-line-height;
  font-weight: $headings-font-weight;
  font-family: $headings-font-family;
}

@for $i from 1 through 6 {
   h#{$i},
   .h#{$i} {
      @extend %myStyle;
   }
}

@extend 将允许您加入选择器。符号% 是placeholder selector，您可以使用它，这样myStyle 就不会出现在编译后的CSS 中。

More info here