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