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

嗯，我不确定你的意思是什么＆＃34;你想要那个输出＆＃34;，因为它不是有效的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);
}

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

1 个答案:

修改