问题场景
sass 版本: 1.52.1
当在 CSS 变量 (CSS Variable) 的自定义属性中应用 Sass/Scss 变量时
这种写法不会如期工作
$primary: #409eff;
:root {--fill-color-primary: $primary;}
// 编译后 css,变量没有胜利利用 ↓
:root {--fill-color-primary: $primary;}
解决方案
起因是 Sass 的语法扭转了
Breaking Change: CSS Variable Syntax
… 为了提供与一般 CSS 的最大兼容性,较新版本的 Sass 要求在 插值 中写入自定义属性值中的 SassScript 表达式 …
$primary: #409eff;
:root {--fill-color-primary: #{$primary};
}
// 编译后 css
:root {--fill-color-primary: #409eff;}
扩大浏览
sass 插值
相似于 ES6 中的模板字符串插值 ${}
;