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

Question

is it possible to generate class names by css variables?

I am using scss in angular and I want to generate my class names base on

@input color

property of component

so I store the input in a css variable named --color-variable to use it in my scss file. I want to do something like this:

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

this is the compiler error:

any suggestions would be helpfull.

Answer 1

is it possible to generate class names by css variables?

Short answer:

No.

Longer answer:

CSS custom properties, also commonly called CSS variables, are known at runtime, while SASS variables are known at compile time. Since browsers can't understand SASS, it first needs to be compiled down to CSS and by that time, the SASS compiler won't know what the value of the CSS variable will be, so it throws a compile error.

Possible solution

Dynamically generate CSS based on your input and add it to the DOM.