Using Scss variables in CSS Var custom properties

problem scenario

sass version: 1.52.1

When using Sass/Scss variables in custom properties of CSS Variables

This way of writing won't work as expected

 $primary: #409eff;
:root {
    --fill-color-primary: $primary;
}

// 编译后 css，变量没有成功应用 ↓
:root {
  --fill-color-primary: $primary;
}

solution

The reason is that the syntax of Sass has changed

Breaking Change: CSS Variable Syntax
...to provide maximum compatibility with plain CSS, newer versions of Sass require SassScript expressions in custom property values to be written in interpolation ...

 $primary: #409eff;
:root {
    --fill-color-primary: #{$primary};
}

// 编译后 css
:root {
  --fill-color-primary: #409eff;
}

Extended reading

sass interpolation
Similar to template string interpolation in ES6 ${} ;