css - 使用@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