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

Question

是否可以编写一个带有预定义颜色十六进制代码的类？这样在我的 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 遍历 map :

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

@each 循环所做的就是遍历 $colors 中的每个键/值对，将键 (例如:red) 分配给 $colorname 并将值 < em>(例如:#ff0000) 到 $color。

编译后的 CSS 将是:

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

如果将来您想添加一种新颜色，只需将键/值对添加到 $colors 映射并进行编译即可!