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

Question

是否可以用预定义的颜色十六进制代码编写 class？这样在我的 HTML 中我可以创建如下元素：

$yellow: #FFFF00;

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

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

这将是我的问题解决方案。我的问题是我的 .scss 文件中有太多 class 不同颜色的元素。

谢谢

Answer 1

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

更详细的解释：

自 SASS 3.3 you can use the map data structure。他们混合存储 key/value 对：

$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中的每个key/value对，将键（例如：red）分配给$colorname和值 （例如：#ff0000） 到 $color.

编译后的 CSS 将是：

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

如果将来您想要添加新颜色，只需将 key/value 对添加到 $colors 映射并编译即可！

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

How to write classes with parameter in scss?

css

parameters

class

sass

colors