薩斯：從一個變量

Question

我想創建像這樣

$multi: foo, bar, baz 

與類變量和多類選擇我要創建的組合選擇，像這樣：

.foo, .bar, .baz {} 

我用的縮進語法（不知道這是否重要）。我想要從變量生成的組合選擇器的原因：我需要根據在那裏定義的類數來進行計算。請不要提出像（使用擴展！）這樣的建議，因爲這將需要我再創建一個課程。我需要能夠接近或完全符合常規的組合選擇器輸出。

Answer 1

Compass offers a built-in sprite mixin that does just this.如果你不想使用所有的指南針，你可以look into their source看看他們是如何做的。

Answer 2

我有同樣的問題，因爲OP，這是第一個搜索結果我發現，所以現在我已經想通了，我會後我的解決方案，這些問題即使爲1.5歲。

下面是我發現的：爲了使用變量作爲選擇器，您使用SASS interpolation，它與逗號分隔的字符串完美配合。但是，如果你想保存你的選擇是一個list（這樣你可以在上面使用列表功能，例如length($multi)）變量，插值將產生一個畸形的選擇。

所以，簡單的解決方法是先定義變量列表，那麼當你需要使用它作爲一個選擇，該列表轉換成一個逗號分隔的字符串：

$multi: ".foo", ".bar", ".baz" 
$multi-selector: "" 
@each $selector in $multi 
    @if $multi-selector != "" 
     $multi-selector: $multi-selector + ", " 
    $multi-selector: $multi-selector + $selector 

#{$multi-selector} 
    //CSS properties go here 

您可能希望抽象列表到逗號分隔字符串功能集成到一個功能（注：上海社會科學院的join功能無法做到這一點，它連接兩個列表成爲一個新的）。這裏是一個可能實現：

@function unite($list, $glue: ", ") 
    @if length($list) == 1 
     @return $list 

    $string: "" 
    @each $item in $list 
     @if $string != "" 
      $string: $string + $glue 
     $string: $string + $item 
    @return $string 

此時原代碼可以儘量精簡：

$multi: ".foo", ".bar", ".baz" 

#{unite($multi)} 
    //CSS properties go here 

Answer 3

（代碼前面的答案）酷的功能！有用。我只是想添加一些SCSS語法，給一個機會，人們使用它：

@function unite($list, $glue: ", ") { 
    @if length($list) == 1 { 
      @return $list; 
    } @else { 
     $string: ""; 
     @each $item in $list { 
      @if $string != "" { $string: $string + $glue; } 
       $string: $string + $item; 
    } 

    @return $string; 
    } 
} 

此時原代碼可以儘量精簡：

$multi: ".foo", ".bar", ".baz" 

#{unite($multi)} 
    //CSS properties go here