css - SASS 检查类名

Question

嗨，我对 SASS 还是很陌生，也不是编程专家。

我有十个 asides 元素，它们都需要根据它们的类名使用不同的背景颜色。

我查看了 SASS 文档，但我无法理解。

我想说如果 aside 有一个类名 x 使背景色为 x 如果 aside 有一个类名 y 使背景色为 y 等

有没有一种高效的方法来做到这一点？

谢谢大家，抱歉，如果这是一个简单的问题。

Answer 1

如果您使用的颜色没有“标准”名称(或者类名根本不是颜色名称，例如，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; }