Using SCSS variable inside CSS3 variable definitio

问题:

I am figuring out how to apply styling to a reusable Angular component from within a client project. See Theme/style Angular 2 reusable component libraries => look for "follow up".

I now have one issue remaining:

I try to use a SCSS variable inside a CSS variable, but that CSS variable does not seem to be defined:

$primary-color: #666666;

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

In other component (in other component library, built separately):

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

$primary-color seems to be empty... not #666666, neither #5FB0FD.

回答1:

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

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

Once you've converted your Sass variable into CSS, there's no getting it back. Therefore, in your other component you should maybe stick with pure CSS. The following will use #5FBOFD if --ang-ux-primary-color is undefined.

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