Question

是否可以编写具有预定义颜色HexCodes的类？所以在我的HTML中我可以创建如下的元素：

$yellow: #FFFF00;

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

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

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

由于

Answer 1

您可以很容易地在SCSS中实现这一点。对于快速解决方案：here's the code in a JSfiddle。

更详细的解释：

自SASS 3.3以来，您可以使用map data structure。它们存储了一组键/值对：

$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地图中添加键/值对并编译一样简单！

如何在scss中编写带参数的类？

1 个答案: