CSS Var 自定义属性中使用 Scss 变量
问题场景
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 中的模板字符串插值 ${}
;
转载自:https://segmentfault.com/a/1190000042045629