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); 

如何傳遞一個以上的類插入混入。例如。

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