Sass @each有多个变量

我刚刚开始使用Sass和Compass，我很喜欢它。我想要做的就是利用@each函数来简化重复性任务。但是，我只看到了插入一个变量的例子@each，我想能够使用多个变量。Sass @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}; 
    } 
}

这可能吗？

来源

2011-07-04 steve

我在同一条船上（初学者为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); 
    } 
}

这不是最完美的解决方案，但如果你不能找到别的它应该工作。希望能帮助到你！我会很感激一个更好的方法:)

来源

2011-07-04 20:14:11 Treeki

这太棒了！谢谢@treeki – steve

仅供参考：如果您需要将两个列表组合在一起以创建对列表，例如'$ flash_types'，则可以使用Sass函数['zip']（http://sass-lang.com/docs /yardoc/Sass/Script/Functions.html#zip-instance_method）。 – Miikka

刚刚遇到这个，有你的答案。在萨斯，你其实可以有多方面的列表，所以不是构建单个变量，你需要创建一个变量来保存它们，然后在他们的循环：

$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

来源

2011-12-05 01:39:07 Snugug

这与treeki的答案基本相同，但你的优雅得多。 – chriscauley

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

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

来源

2013-07-12 03:50:50

此功能支持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

来源

2014-09-19 18:05:08 mvemjsunp

另一种解决办法是创造不同的列表和“拉链”他们。

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

也许这个解决方案是更复杂比别人十个分量，但如果你使用一个列表超过一次，可以节省时间。（是我的情况）

来源

2016-03-29 11:39:53 gBaylaender

Sass @each有多个变量

回答

相关问题