您好，我对 SASS 还是很陌生，也不是编程大师。
我有十个辅助元素，它们都需要根据它们的类名使用不同的背景颜色。
我查看了 SASS 文档，但我无法弄清楚。
我想说如果 side 有一个类名 x 制作背景颜色 x 如果 side 有一个类名 y 制作背景颜色 y 等等
有没有很好的有效方法？
谢谢大家，如果这是一个简单的问题，对不起。
【问题讨论】：
标签： css class variables sass mixins
如果您使用的颜色没有“标准”名称（或者类名称根本不是颜色名称，例如产品 = 蓝色，地址 = 红色），a列表列表就是你想要的：
$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; }
【讨论】：
--style compress 解决错误，您应该将颜色名称放入选择器引用的字符串中。因此，在第一个示例中，它将是：$colors: ('black' #00F, 'white' #FFF, ...)
这完全取决于您要输入多少字。您可以制作一个背景混合并将其包含在备用 CSS 规则中，但这真的有必要吗？
如果是这样的话……
@mixin bg($color) {
background: $color;
}
aside#foo {
@include bg(#fff);
}
【讨论】：
“如果aside 有一个类名x 使背景颜色x 如果aside 有一个类名y 使背景颜色y”转换为以下CSS：
aside.x {background-color: x}
aside.y {background-color: y}
您想使用 SASS 有什么原因吗？是让它动态化，这样你就可以在将来添加任何你想要的类而不更新 CSS？ （如果是这样，SASS 就不可能，因为 SASS 代码编译为 CSS 并且之后不会更改）。
要完成这项工作，您必须使用 JS (jQuery)：
$('aside').each(function () {
$(this).css('background-color', $(this).attr('class'));
});
编辑：您可以在 SASS 中使用循环来生成大量类和相应的背景颜色。
【讨论】：