Рассмотрим 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;
}
Как это может быть сделано? Я чувствую, что он должен стать тем, что мне нужно, с немного другим синтаксисом, но я не могу этого понять. Кто-нибудь может помочь?






Вы можете использовать @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.
@happy Нет проблем, я рад, что смог помочь. ^^
У меня недостаточно репутации, чтобы проголосовать за ваш ответ, извините