是否可以编写一个带有预定义颜色十六进制代码的类? 这样在我的 HTML 中我可以创建如下元素:
$yellow: #FFFF00;
.color($colorName) {
color: $colorName;
}
<div class="color(yellow)">
</div>
这将是我的问题解决方案。我的问题是我的 .scss 文件中有太多不同颜色的类。
谢谢
最佳答案
您可以在 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 映射并进行编译即可!
关于css - 如何在scss中编写带参数的类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30018885/