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

Question

Я часто использую 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; 
} 

Answer 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; 
}