Sass @each有多个变量 [英] Sass @each with multiple variables

问题描述

我刚刚开始使用Sass和Compass，我喜欢它。我想要做的是利用 @each 函数来简化重复任务。但是，我只看到 @each 插入一个变量的示例，我想要能够使用多个变量。

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

  @each $ animal in puma，sea-slug，egret，salamander {
。＃{$ animal}图标{
 background-image：url（'/ images /＃{$ animal} .png'）; 
} 
} 
  

这是伟大的，但我想能够在{puma black}，{sea-slug green}中执行类似操作：

  @each {$ animal $ color} ，{egret brown}，{salamander red} {
。＃{$ animal} -icon {
 background-color：＃{$ color};这是可能吗？
 
 
 
 
 
 
 
 
 $ b $ $ b 
解决方案
我在同一艘船上（初级到Sass / Compass），不得不做类似的事情。这是我想出了，使用嵌套列表：
  $ flash_types：（success＃d4ffd4）（error＃ffd5d1）; 
 
 @each $ flash_def in $ flash_types {
 $ type：nth（$ flash_def，1）; 
 $ color：nth（$ flash_def，2）; 
 
&。＃{$ type} {
 background-color：$ color; 
 background-image：url（../ images /＃{$ type} .png）; 
} 
} 
  
这不是最优雅的解决方案，你找不到任何东西。希望它帮助！我也喜欢一个更好的方法：）
 
I'm just getting started with Sass and Compass, and I'm loving it. Something I'd like to do is take advantage of the @each function to simplify repetitive tasks. However, I've only seen examples of @each inserting one variable, and I'd like to be able to use multiple variables.

The standard way (from the Sass Reference):
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
Which is great, but I'd like to be able to do something like:
@each {$animal $color} in {puma black}, {sea-slug green}, {egret brown}, {salamander red} {
  .#{$animal}-icon {
    background-color: #{$color};
  }
}
Is this possible?
解决方案
I'm in the same boat (beginner to Sass/Compass) and had to do something similar. Here's what I came up with, using nested lists:
$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);
    }
}
It's not the most elegant solution but it should work if you can't find anything else. Hope it helps! I'd appreciate a better method too :)

                        
这篇关于Sass @each有多个变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！