当硬编码值正常工作时，sass：颜色失败

Posted 2023-02-21

【中文标题】当硬编码值正常工作时，sass：颜色失败

【英文标题】：sass:color failing when hardcoded values work fine

【发布时间】：2021-05-27 21:50:44

【问题描述】：

我刚刚将 sass 添加到我的 create-react-app 项目中。当我对颜色值进行硬编码时，样式会相应更新。但是当我尝试使用一些 scss 方法时，新样式被忽略了。

例如这工作正常...

:root 
  --title-blue: #2086c3;

...这不是...

$color-test: black !default;

:root 
  --title-blue: mix($color-test, white, 50%);

...这个也没有

:root 
  --title-blue: $color-test

我可以导入新重命名的 .scss 文件并且所有样式保持一致，所以我认为这不是编译错误。

任何想法为什么会这样？我正在使用node-sass v4.14.1，因为节点 sass 5 给了我a react error。

【参考方案1】：

我觉得你可以试试

$color-test: #000000;

:root 
    --title-blue: #$color-test;

几年前Sass 停止支持将Sass 变量分配给CSS 变量。似乎从未打算支持它，而且这是一个违反 SASS 语言规范的错误。使用string interpolation 可以解决这个问题。

你可以在这个 Sass 语言的 Github 问题中阅读更多信息：

https://github.com/sass/node-sass/issues/2336