Sass @each有多個變量

Question

我剛剛開始使用Sass和Compass，我很喜歡它。我想要做的就是利用@each函數來簡化重複性任務。但是，我只看到了插入一個變量的例子@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); 
    } 
} 

你可以有多方面的名單就像你只要每個嵌套維度以不同的方式分隔（在我們的例子中爲逗號和空格），就有單維列表。

UPDATE 2013年10月24日

在薩斯3.3，有一個名爲一個新的數據類型映射其是散列組項目。有了這個，我們可以重寫我以前的答案在下面的方式更接近於理想的結果：

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

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

您可以在行動上，在SassMeister

Answer 3

看到這另一種方法我用了，如果有人需要它：

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

也許這個解決方案是更復雜比別人十個分量，但如果你使用一個列表超過一次，可以節省時間。 （是我的情況）