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中，你实际上可以拥有一个多维列表，所以不是构造单个变量，而是创建一个变量来保存所有变量，然后遍历它们：

$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

处查看此操作

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

这不是最优雅的解决方案，但如果您找不到其他任何东西，它应该可以使用。希望能帮助到你！我也很欣赏一种更好的方法：）

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

如果您要更新Sass，我建议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;
    }
}

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

Sass @each有多个变量

5 个答案: