Sass @each 处理多个变量

Question

我刚开始学习 Sass 和 Compass 并且非常喜欢它们。我想要做的事情是利用 @each 函数来简化重复的任务。但是，我只看到了插入一个变量的示例，我希望能够使用多个变量。

标准方式（来自Sass 参考文档）：

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

这是否可能？

- steve

Answer 1

我刚碰巧发现这个问题，有答案可以提供。在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中，有一种新的数据类型称为映射，它是一组带有哈希值的项。使用这种方法，我们可以以更接近所需结果的方式重写之前的答案：

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

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

你可以在SassMeister上观看它的实际应用。

- Snugug

---

这与treeki的回答基本相同，但您的更加优美。 - chriscauley

Answer 2

我和你一样（对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);
    }
}

如果找不到其他更好的方法，那么这不是最优雅的解决方案，但应该能够工作。希望对你有所帮助！我也很希望有更好的方法 ：）

- Treeki

---

供参考：如果你需要将两个列表合并在一起创建一组键值对的列表，例如 $flash_types，你可以使用 Sass 函数 zip。 - Miikka

Answer 3

如果有人需要的话，我使用的另一种方法：

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

- Pablo Revuelta

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

我建议在更新Sass时，查看变更日志以了解不兼容性。 Sass参考：使用@each进行多重赋值。

- mvemjsunp

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

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

- gBaylaender