Css SASS检查类名

嗨，我还是SASS的新手，没有编程大师

我有十个asides元素，它们都需要基于类名的不同背景颜色

我已经看过SASS文档了，我想不出来

我想说如果aside的类名是x，背景颜色是x，如果aside的类名是y，背景颜色是y，等等

有没有一个很好的有效的方法

---

谢谢大家，如果这是一个愚蠢的问题，我很抱歉。

这只取决于你想输入多少。您可以制作一个背景混音，并将其包含在CSS规则中，但这真的有必要吗

如果是的话

@mixin bg($color) {
    background: $color;
}

aside#foo {
    @include bg(#fff);
}

“if aside的类名为x生成背景色x if aside的类名为y生成背景色y”转换为以下CSS：

aside.x {background-color: x}
aside.y {background-color: y}

您想使用SASS有什么原因吗？是为了使它动态化，以便将来可以添加任何您想要的类，而无需更新CSS吗？（如果是这样的话，这在SASS中是不可能的，因为SASS代码编译成CSS，并且在之后不会更改）

要做到这一点，您必须使用JS（jQuery）：

---

编辑：您可以在SASS中使用循环来生成大量类和相应的背景色。

如果您使用的颜色没有“标准”名称（或者类的名称根本不是颜色名称，例如products=蓝色，addresses=红色），则列表就是您想要的：

$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

会生成错误）：

---

你可以在列表上循环。。。你不想写出每个定义有什么原因吗？因为如果结果只是每个类的背景色定义，那么设置循环将需要同样多的键入。仅供参考，我认为不可能完全按照您的要求执行，但这是SASS最接近您的方式！说真的，你为什么要这么做？你为一个没有被问到的问题提供了一个解决方案。呃？也许我误解了这个问题，但对我来说，OP似乎想根据10个元素的类名给它们不同的bg颜色。我为这个问题提供了一个CSS解决方案（只是像平常一样编写CSS）和一个JS解决方案。你认为我回答了哪个问题没有被问到？谢谢你们的帮助。工作是一种享受。我正在使用

--style compress

来解决这些错误，您应该将颜色名称放入带引号的选择器字符串中。因此，在第一个示例中，它将是：

$colors:（'black'#00F，'white'#FFF，…）

$colors2: black, white, red, green, blue;

@each $i in $colors2 {
    aside.#{$i} { background: $i; }
}

aside.black {
  background: black; }

aside.white {
  background: white; }

aside.red {
  background: red; }

aside.green {
  background: green; }

aside.blue {
  background: blue; }