SASS Mixin - 使用变量填充类名

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

你应该使用“associative array”来定义颜色的名称和代码：

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

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

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