Sass @each有多个变量

Question

我刚刚开始使用Sass和Compass,我很喜欢它.我想做的是利用该@each功能来简化重复性任务.但是,我只看到@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};
  }
}

这可能吗？

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

这不是最优雅的解决方案,但如果您找不到其他任何东西,它应该可以工作.希望能帮助到你!我也很欣赏一个更好的方法:)