How to use --var in SASS?

TheCzechTayen :

how can i use CSS variables in SASS file? I tried:

:root
  --app: red

OR

$color

:root
  --app: #{$color}

I want the result to render as:

:root {
  --app: red
}

but it doesn't work, I get SassError: invalid CSS, expected 1 selector or at-rule, was "root: {"

How do I select this :root in SASS file?

FIXED I uninstalled node-sass and installed sass and it works. Ty for helping :)

Nadim Al Abdou :

you can check this link for more information https://sass-lang.com/documentation/breaking-changes/css-vars

SASS

$accent-color: #fbbc04

:root
// WRONG, will not work in recent Sass versions.
--accent-color-wrong: $accent-color

// RIGHT, will work in all Sass versions.
--accent-color-right: #{$accent-color}

SCSS

$accent-color: #fbbc04;

:root {
  // WRONG, will not work in recent Sass versions.
  --accent-color-wrong: $accent-color;

  // RIGHT, will work in all Sass versions.
  --accent-color-right: #{$accent-color};
}

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=404683&siteId=1