Clever Geek Handbook

Using SCSS variable in CSS3 variable definition doesn't work?

I will figure out how to apply styling to a reusable Angular component from a client project. See Angular 2 theme / style repeating library => search for "follow up".

Now I am left with one problem:

I'm trying to use an SCSS variable inside a CSS variable, but this CSS variable doesn't seem to be defined:

$primary-color: #666666;

// styling reusable components
:root {
  --ang-ux-primary-color: $primary-color;
}

In another component (in another component library built separately):

$primary-color: var(--ang-ux-primary-color, #5FB0FD);

$ primary color appears to be empty ... not # 666666 nor # 5FB0FD.

0


source to share


1 answer


To convert a Sass variable to a CSS variable, you need to interpolate it :

--ang-ux-primary-color: #{$primary-color};


Once you convert the Sass variable to CSS, there is no way to return it. Therefore, in your other component, you should stick to pure CSS. The following will use #5FBOFD

if --ang-ux-primary-color

is undefined.

--ang-ux-primary-color: var(--ang-ux-primary-color, #5FB0FD);
0


source






More articles:


All Articles