Can't assign sass variable to css variable [duplicate]

Question

This code doesn't work is Sass:

$color1: 

.App {
  --color1: $color1;
}

Why is this not valid syntax? What is the proper syntax?

Does this answer your question? Sass Variable in CSS calc() function — Hykilpikonna
– Hykilpikonna, Commented Aug 1, 2020 at 3:30

Seph Reed · Accepted Answer · 2020-08-01 03:08:32Z

2

This being invalid syntax is intended, the solution is to use:

$color1: 

.App {
  --color1: #{$color1};
}

The reason for this is discussed here: https://github.com/sass/libsass/issues/2621

In short, css variables could potentially be a string that starts with a $ character, and Sass did not want to block that syntax from working. Given that #{$someVar} is not valid css syntax, it is functional and more explicit to have it be this way.

answered Aug 1, 2020 at 3:08

Seph Reed

11.5k15 gold badges89 silver badges159 bronze badges

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

Collectives™ on Stack Overflow

Can't assign sass variable to css variable [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related