SCSS: передать несколько классов в mixin

Я часто использую mixins для хранения кусков кода. Например:

@mixin ui-spot-badges($ui-spot-badges: ui-spot-badges) {
 .#{$ui-spot-badges} { 
 position:relative; 
 @content;
 &:after {
 content:""; 
position:absolute;
background:red;
 }
 }
 }
 @include ui-spot-badges(myclass);

Как я могу передать более одного класса в mixin. Например.

@include ui-spot-badges(myclass, myclass2);

чтобы получить

.myclass, myclass2 {
 position:relative; 
}
.myclass:after, .myclass2:after {
 content:""; 
position:absolute;
background:red;
}
1 ответ

Самый эффективный способ сделать это - передать список селекторов в виде строки:

@include ui-spot-badges('.myclass, .myclass2');

В противном случае вам нужно выполнить цикл, чтобы правильно сгенерировать селектор.

@mixin ui-spot-badges($badges...) {
 $selectors: ();
 @each $b in $badges {
 $selectors: append($selectors, unquote('.#{$b}'), comma);
 }
 #{$selectors} {
 position:relative; 
 @content;
 &:after {
 content:""; 
 position:absolute;
 background:red;
 }
 }
}
@include ui-spot-badges(a, b);

Вывод:

.a, .b {
 position: relative;
}
.a:after, .b:after {
 content: "";
 position: absolute;
 background: red;
}

licensed under cc by-sa 3.0 with attribution.