关于scss: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 中的模板字符串插值 ${};