嗨,我对 SASS 还是很陌生,也不是编程专家。
我有十个 asides 元素,它们都需要根据它们的类名使用不同的背景颜色。
我查看了 SASS 文档,但我无法理解。
我想说如果 aside 有一个类名 x 使背景色为 x 如果 aside 有一个类名 y 使背景色为 y 等
有没有一种高效的方法来做到这一点?
谢谢大家,抱歉,如果这是一个简单的问题。
最佳答案
如果您使用的颜色没有“标准”名称(或者类名根本不是颜色名称,例如,products = blue,addresses = red),列表列表就是你想要的:
$colors:
( black #000
, white #FFF
, red #F00
, green #0F0
, blue #00F
);
@each $i in $colors {
aside.#{nth($i, 1)} {
background: nth($i, 2);
}
}
输出:
aside.black {
background: black; }
aside.white {
background: white; }
aside.red {
background: red; }
aside.green {
background: lime; }
aside.blue {
background: blue; }
如果您将颜色与标准关键字一起使用,这可能有效:
$colors2: black, white, red, green, blue;
@each $i in $colors2 {
aside.#{$i} { background: $i; }
}
输出(尽管这似乎只适用于 --style debug
,使用 --style compress
会产生错误……很奇怪):
aside.black {
background: black; }
aside.white {
background: white; }
aside.red {
background: red; }
aside.green {
background: green; }
aside.blue {
background: blue; }
关于css - SASS 检查类名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12914855/