css – Sass @each有多个变量

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

这可能吗？

解决方法

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

这不是最优雅的解决方案，但它应该工作，如果你找不到任何其他。希望它帮助！我也会喜欢一个更好的方法:)