複数の変数を持つSass @each

Question

私はSassとCompassを使い始めています。私はそれを愛しています。私がしたいことは、反復的な作業を単純化するために@each機能を利用することです。しかし、私は1つの変数を挿入する@eachの例しか見ていないので、複数の変数を使用できるようにしたいと思います。

（Sass Referenceから）標準的な方法：

@each $animal in puma, sea-slug, egret, salamander { 
    .#{$animal}-icon { 
    background-image: url('/images/#{$animal}.png'); 
    } 
} 

素晴らしいですが、私のような何かをできるようにしたいと思います：

@each {$animal $color} in {puma black}, {sea-slug green}, {egret brown}, {salamander red} { 
    .#{$animal}-icon { 
    background-color: #{$color}; 
    } 
} 

可能これですか？

Answer 1

私は同じボート（Sass/Compassの初心者）にいて、同様のことをしなければなりませんでした。ここでは、ネストされたリストを使用して、私が思い付いたものです：

$flash_types: (success #d4ffd4) (error #ffd5d1); 

@each $flash_def in $flash_types { 
    $type: nth($flash_def, 1); 
    $colour: nth($flash_def, 2); 

    &.#{$type} { 
     background-color: $colour; 
     background-image: url(../images/#{$type}.png); 
    } 
} 

それは最もエレガントな解決策ではないのですが、あなたが何かを見つけることができない場合、それが動作するはずです。それが役に立てば幸い！私も良い方法をありがとうと思います:)

Answer 2

ちょうどこれを見て、あなたのための答えを持っています。それらをループその後、サスでは、あなたが実際に多次元のリストを持つことができ、その代わりに、個々の変数を構築する、あなたはそれらすべてを保持するための変数を作成したい：

$zoo: puma black, sea-slug green, egret brown, salamander red; 

@each $animal in $zoo { 
    .#{nth($animal, 1)}-icon { 
    background-color: nth($animal, 2); 
    } 
} 

あなたはちょうどあなたのような多次元のリストを持つことができますそれぞれの入れ子にされた次元が異なる方法（ここではカンマと空白）で区切られている限り、1次元のリストを持ちます。

UPDATE 2013年10月24日サス3.3

、アイテムのハッシュ化されたセットであるマップと呼ばれる新しいデータ型があります。あなたがオーバーSassMeister

Answer 3

誰がそれを必要とする場合、私は使用別の方法でこの動作を確認することができます

$zoo: ("puma": black, "sea-slug": green, "egret": brown, "salamander": red); 

@each $animal, $color in $zoo { 
    .#{$animal}-icon { 
     background-color: $color; 
    } 
} 

：これで、私たちは、所望の結果に似てはるかに密接に次のように私の前の回答を書き換えることができます：

$i:0; 
@each $name in facebook, twitter, google_plus, instagram, youtube, pinterest { 
    $i:$i+1; 
} 

Answer 4

この機能はSass 3.3.0以上でサポートされています（これを使用するには、3.2.14から3.4.4に更新しました）。

@each $animal, $color in (puma, black), (sea-slug, green), (egret, brown), (salamander, red) { 
    .#{$animal}-icon { 
    background-color: $color; 
    } 
} 

あなたはサスを更新している場合、私は、下位互換性がないためcheck the changelogにお勧めします。

Sass reference for multiple assignments with @each

Answer 5

別の解決策は、異なるリストと「ジップ」、それらを作成することができます。

//Create lists 
$animals: puma, sea-slug, egret, salamander; 
$animals-color: black, green, brown, red; 

//Zip lists 
$zoo: zip($animals, $animals-color); 

//Do cycle 
@each $animal, $color in $zoo { 
    .#{$animal}-icon { 
     background-color: $color; 
    } 
} 

おそらく、この解決策は他のものよりも複雑ですが、リストを複数回使用すると時間を節約できます。 （私の場合でした）