带有多个变量的 Sass @each

Posted 2023-03-06

【中文标题】带有多个变量的 Sass @each

【英文标题】：Sass @each with multiple variables

【发布时间】：2011-09-28 04:36:47

【问题描述】：

我刚刚开始使用 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;
  

这可能吗？

【参考方案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);
    

这不是最优雅的解决方案，但如果您找不到其他任何东西，它应该可以工作。希望能帮助到你！我也希望有更好的方法:)

【讨论】：

供参考：如果需要将两个列表组合在一起创建一个pairs列表，比如$flash_types，可以使用Sass函数zip。

【参考方案2】：

刚遇到这个，给你答案。在 Sass 中，您实际上可以拥有一个多维列表，因此您可以创建一个变量来保存所有变量，而不是构建单个变量，然后循环遍历它们：

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

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

您可以像拥有单维列表一样拥有多维列表，只要每个嵌套维度以不同的方式（在我们的示例中为逗号和空格）分隔即可。

2013 年 10 月 24 日更新

在 Sass 3.3 中，有一个名为 maps 的新数据类型，它是一组散列项。有了这个，我们可以用以下方式重写我之前的答案，以更接近预期的结果：

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

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

您可以在 SassMeister 上查看此操作

【讨论】：

这与treeki的答案基本相同，但您的答案要优雅得多。

【参考方案3】：

如果有人需要，我会使用另一种方式：

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

【参考方案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;
  

如果您要更新 Sass，我建议 check the changelog 解决向后不兼容问题。

Sass reference for multiple assignments with @each

【参考方案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;
    

这个解决方案的维护可能比其他解决方案更复杂，但如果您多次使用列表，则可以节省时间。 （是我的情况）