Sass @each具有多个变量

  • Z时代
  • 2024-01-10
  • 分类：问答

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

这可能吗？

回答：

我在同一条船上（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);
    }
}

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

以上是 Sass @each具有多个变量 的全部内容， 来源链接： utcz.com/qa/413043.html

回到顶部