使用 @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;
   }
}

符号

%

是一个占位符选择器，你可以使用它，这样

myStyle

就不会出现在编译后的

CSS

中。