Using SCSS variable inside CSS3 variable definition not working?

Question

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.

There is no such var function in sass. In your case the value of $primary will be just that: var(--ang-ux-primary-color, #5FB0FD). Does the assigned styles fail to render the $primary-color? What is the css output? — muecas
– muecas, Commented May 25, 2018 at 18:42

mfluehr · Accepted Answer · 2018-05-25 21:43:33Z

4

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);

edited May 25, 2018 at 21:43

answered May 25, 2018 at 19:59

mfluehr

3,2452 gold badges30 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

muecas Over a year ago

No, thats not a good answer. The output with or without interpolation is the same. And this does not answer the question.

mfluehr Over a year ago

I fleshed out my answer to address the second part of the poster's question. As to the interpolation, I tried it out on CodePen and it is required.

muecas Over a year ago

good but the first part is still wrong. You don’t need to interpolate variables if you use the variables as properties values. Just use the variable name: $primary.

mvermand Over a year ago

@muecas, so you say my solution (--ang-ux-primary-color: $primary-color;) should have to work?

Erik Philips Over a year ago

You absolutely have to interpolate scss variable to apply the value to a css variable.

|

Collectives™ on Stack Overflow

Using SCSS variable inside CSS3 variable definition not working?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related