如何在scss中使用参数编写类？

Question

是否可以编写带有预定义的color-HexCodes的类？因此，在我的HTML中，我可以创建如下元素：

$yellow: #FFFF00;

.color($colorName) { 
color: $colorName; 
}

<div class="color(yellow)">
</div>

这将是我的问题解决方案。我的问题是我的scss文件中有太多带有颜色的类。

谢谢

Answer 1

您可以很容易地在SCSS中实现这一目标。快速解决方案：这是JSfiddle中的代码。

更详尽的解释：

从SASS 3.3开始，您可以使用地图数据结构。它们存储键/值对的混合：

$map: (key1: value1, key2: value2, key3: value3);

因此，根据您的情况，您可以创建一个颜色映射（任意长或短）供以后参考：

$colors: (
    red: #ff0000,
    yellow: #ffd000,
    blue: #00baff,
    green: #00ff00
);

现在，要生成CSS类，您需要使用一些SASS在地图上循环：

@each $colorname, $color in $colors {
    .square--#{$colorname} {
       background-color: $color;
    }
}

此@each循环的全部工作是循环遍历$ colors中的每个键/值对，将键（例如：红色）分配给$ colorname，并将值（例如：＃ff0000）分配给$ color。

编译后的CSS将是：

.square--red    { background-color: #ff0000; }
.square--yellow { background-color: #ffd000; }
.square--blue   { background-color: #00baff; }
.square--green  { background-color: #00ff00; }

如果将来要添加新颜色，就像将键/值对添加到$ colors映射并进行编译一样简单！