Can't assign sass variable to css variable

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](https://stackoverflow.com/questions/17982111/sass-variable-in-css-calc-function) — Hykilpikonna, Aug 01 '20 at 03:30

score 2 · Accepted Answer · answered Aug 01 '20 at 03:08

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.

Can't assign sass variable to css variable

1 Answers1