如何动态设置css类属性

Question

是否有一种方法可以动态地设置CSS类的属性值，而无需使用编译器或javascript。

:root {
--color-0 : red;
--color-1 : blue;
--color-3 : yellow;
}

.bg-color-[*] {
    background-color: var(--color-[*]);
}

然后，在我的html中，我可以传入用于选择正确变量的数值。

<div class="bg-color-1">This background should be red</div>
<div class="bg-color-2">This background should be blue</div>
<div class="bg-color-3">This background should be yellow</div>

Answer 1

不幸的是，这在CSS中是不可能的。CSS本身并不真正具有添加逻辑的能力。

您可以考虑使用CSS预处理器。有几种不同的“语言”非常类似于CSS，但在嵌套和逻辑方面更详细。一个例子就是SASS。我知道SASS可以为你做这件事。

然后，CSS预处理程序将这些SASS文件转换为普通CSS文件。

Answer 2

在scss中，您可以这样做：

@for $i from 1 through 3 {
    .bg-color-#{$i} {
        background-color: var(--color-#{$i});
    }
}