SASS Mixin - 使用变量填充 class 名称

Question

我有几种颜色设置为 classes

.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，它采用 class 名称并自动创建 class 名称并填充背景颜色，因此我不必每次都输入它。 .

我试过这样的东西

@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

SASS Mixin - 使用变量填充 class 名称

SASS Mixin - Use variables to populate class name

sass