scss可以在文件中定义css变量,采用“$变量名”表示。
普通引入可以直接写 “$变量名”,例如:
//variable.scss
$primaryColor: red;
//test.scss
.text{
color: $primaryColor;
}
最终 color:red;
但是,在 :root 中使用 “$变量名”不生效,例如:
//test.scss
:root{
--color-text: $primaryColor
}
查阅https://sass-lang.com/documentation/breaking-changes/css-vars
需要改为 “#{$变量名}”,如下:
//test.scss
:root{
--color-text: #{$primaryColor}
}