サス：変数

Question

からの複数のクラスセレクタ私はそう

$multi: foo, bar, baz 

のようなクラスを使用して変数を作成したいと、私はそうのような組み合わせのセレクタを作成したい：

.foo, .bar, .baz {} 

私が使用していますインデントされた構文（それが重要かどうかはわかりません）。私は変数から生成された結合されたセレクタを必要とする理由：そこに定義されているクラスの数に基づいて計算を行う必要があります。私は別のクラスを作る必要があるので、（use extend！）のような提案はしないでください。私は、通常の結合セレクタ出力に近いか正確に得ることができる必要があります。

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 

は、あなたがしたいことがあります。あなたは、セレクタとしてそれを使用する、カンマ区切りの文字列にそのリストを変換する必要がある場合

ので、簡単な解決策は、まず、リストとしてあなたの変数を定義することですカンマ区切り文字列の機能を関数に抽象化します（注：SASSのjoin関数はこれを実行せず、2つのリストを新しいものに結合します）。元のコードを、その時点で

@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構文を追加したい：

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

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