无法将 sass 变量分配给 css 变量

Question

此代码无效 Sass:

$color1: 

.App {
  --color1: $color1;
}

为什么这个语法无效？正确的语法是什么？

Answer 1

这是故意的无效语法，解决方案是使用：

$color1: 

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

原因在这里讨论：https://github.com/sass/libsass/issues/2621

简而言之，css 变量可能是以 $ 字符开头的字符串，并且 Sass 不想阻止该语法的工作。鉴于 #{$someVar} 不是有效的 css 语法，它是功能性的并且更明确地使用这种方式。