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

【问题标题】：sass:color failing when hardcoded values work fine当硬编码值正常工作时，sass：颜色失败
【发布时间】：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 问题中阅读更多信息：

【讨论】：