如何在 SASS 中使用 --var？

Question

如何在 SASS 文件中使用 CSS 变量？我试过了：

:root
  --app: red

或

$color

:root
  --app: #{$color}

我希望结果呈现为：

:root {
  --app: red
}

但它不起作用，我得到 SassError: invalid CSS, expected 1 selector or at-rule, was "root: {"

如何在 SASS 文件中选择这个 :root？

已修复 我卸载了 node-sass 并安装了 sass 并且它可以工作。 Ty 帮忙 :)

Answer 1

您可以查看此链接了解更多信息 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};
}