SASS密新 - 使用变量来填充类名

Question

我有几个颜色设置为类

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

但无法找出正确的代码。

Answer 1

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

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

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

我做了一个简单的codepen向您展示：http://codepen.io/pik_at/pen/MYGJqY