使用 css 变量在 scss 中生成 class 名称

Question

是否可以通过 css 个变量生成 class 个名称？

我在 angular 中使用 scss，我想生成我的 class 名称基于

@input color

组件属性

所以我将输入存储在名为 --color-variable 的 css 变量中，以便在我的 scss 文件中使用它。 我想做这样的事情：

.ps-button--color-#{var(--color-variable)}{}

这是编译器错误：

任何建议都会有所帮助。

Answer 1

是否可以通过 css 个变量生成 class 个名称？

简短回答：

不。

更长的答案：

CSS 个自定义属性，通常也称为 CSS 个变量，在运行时已知，而 SASS 个变量在编译时已知。 由于浏览器无法理解 SASS，因此首先需要将其编译为 CSS，到那时，SASS 编译器将不知道 CSS 变量的值是多少，因此会抛出编译错误。

可能的解决方案

根据您的输入动态生成 CSS 并将其添加到 DOM。