SASS Mixin - 使用变量填充类名[重复]答案

【问题标题】：SASS Mixin - Use variables to populate class name [duplicate]SASS Mixin - 使用变量填充类名[重复]
【发布时间】：2015-04-24 15:35:26
【问题描述】：

我有几种颜色设置为类

.black {background: $black;};
.red {background: $red;}
.yellow {background: $yellow;}
.grey {background: $grey;}
.white {background: $white;}
.blue {background: $blue;}
.full-black {background: #000;}
.light-black {background: #222;}

但我想创建一个 mixin，它采用类名并自动创建类名并填充背景颜色，所以我不必每次都输入它..

我尝试过类似的方法

@mixin colours ($black,$full-black,$light-black,$red,$blue,$yellow,$white,$grey) {
    .(colours): background:{colours};
}

但无法找出正确的代码。

【问题讨论】：

stackoverflow.com/a/16126625/2168947
您是否也在 Less 中寻找答案？请澄清。
你不需要一个 mixin 但每个都需要，看看我的回复 ;)

标签： sass

【解决方案1】：

您应该使用“关联数组”来定义颜色名称和代码：

$colors: ("emerald": "#2ecc71", "carrot": "#e67e22");

@each $name, $hexa in $colors {
    .#{$name} {
      color: #{$hexa};
    }
}

我做了一个简单的codepen给你看：http://codepen.io/pik_at/pen/MYGJqY

【讨论】：