Группировка Sass-селекторов при использовании @for

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.

Подробнее здесь