Как создать SASS так, чтобы классы с одинаковым CSS объявлялись вместе с запятыми?

Question

Рассмотрим SASS ниже.

@for $i from 1 through 5 {
.col-#{$i} {
position: relative;
}
}

Он компилируется в следующий CSS.

.col-1 {
  position: relative;
}

.col-2 {
  position: relative;
}

.col-3 {
  position: relative;
}

.col-4 {
  position: relative;
}

.col-5 {
  position: relative;
}

Но я бы хотел, чтобы он компилировался следующим образом.

.col-1,
.col-2,
.col-3,
.col-4,
.col-5 {
  position: relative;
}

Как это можно сделать?Я чувствую, что это должно стать так, как мне нужно, с немного другим синтаксисом, но я не могу понять это.Может кто-нибудь помочь, пожалуйста?

Answer 1

Вы можете использовать @extend, чтобы сделать то, что вы хотите:

%relative {
  position: relative;
}

@for $i from 1 through 5 {
  .col-#{$i} {
    @extend %relative;
  }
}

Вы получите:

.col-5, .col-4, .col-3, .col-2, .col-1 {
  position: relative;
}

Здесь - это объяснение того, как@extend работает.Символ % предназначен для placeholder selectors, это полезно, если вы не хотите, чтобы расширенный селектор (здесь %relative) отображался в вашем CSS.