css - 使用 SASS 从类名称中带有颜色的颜色列表创建类列表

Question

我正在尝试使用 SASS 自动处理大量背景颜色类。我已经定义了一个颜色变量列表。我想为每种颜色自动生成 2 个类，一个纯色背景类和一个透明背景类。

这就是我正在使用的，但我很确定我遇到了一些语法问题，因为它不起作用。

$colors-list: $color1 $color2 $color3;
@each $current-color in $colors-list {
    .{$current-color}-bg { 
        background-color: $current-color;
    }
    .trans-{$current-color}-bg { 
        background-color: rgba ($current-color, 0.9);
    }
}

我想要的输出是:

.color1-bg{ 
    background-color: #00ff00;
    }

.trans-color1-bg{ 
    background-color: rgba(0,255,0,0.9); 
    }

希望这是可能的。谢谢!

Answer 1

嗯，我不确定你所说的“你想要那个输出”是什么意思，因为那不是有效的 CSS。您在此处使用的方式仅适用于命名颜色，不适用于十六进制值。

$color1: red;
$color2: yellow;
$color3: green;

$colors-list: $color1 $color2 $color3;
@each $current-color in $colors-list {
    .#{$current-color}-bg { 
        background-color: $current-color;
    }
    .trans-#{$current-color}-bg { 
        background-color: rgba($current-color, 0.9);
    }
}

输出:

.red-bg {
  background-color: red;
}

.trans-red-bg {
  background-color: rgba(255, 0, 0, 0.9);
}

.yellow-bg {
  background-color: yellow;
}

.trans-yellow-bg {
  background-color: rgba(255, 255, 0, 0.9);
}

.green-bg {
  background-color: green;
}

.trans-green-bg {
  background-color: rgba(0, 128, 0, 0.9);
}

编辑

要使用十六进制值，您可以使用映射:

$color-map: (
  red: #f00,
  green: #0f0,
  blue: #00f
);

@each $name, $color in $color-map {
  .#{$name}-bg {
    background: $color;
  }
  .#{$name}-bg-transparent {
    background-color: rgba($color, 0.9);
  }
}

输出:

.red-bg {
  background: #f00;
}

.red-bg-transparent {
  background-color: rgba(255, 0, 0, 0.9);
}

.green-bg {
  background: #0f0;
}

.green-bg-transparent {
  background-color: rgba(0, 255, 0, 0.9);
}

.blue-bg {
  background: #00f;
}

.blue-bg-transparent {
  background-color: rgba(0, 0, 255, 0.9);
}