Search code examples
sasscss-variables

Can't assign sass variable to css variable

This code doesn't work is Sass:

$color1: 

.App {
  --color1: $color1;
}

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

Solution

  • 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.