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

Question

我刚刚将sass添加到我的创建-反应-应用程序项目中。当我硬编码颜色值时，样式会相应地更新。但是当我尝试使用一些scss方法时，新的样式被忽略了。

e、 这个很好用。。。

: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给我一个反应错误。

Answer 1

我觉得你可以试试

$color-test: #000000;

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

几年前，Sass停止支持将Sass变量分配给CSS变量。似乎它从未打算支持它，而且它是一个违反SASS语言规范的bug。使用字符串插值解决了这个问题。

你可以阅读更多关于它在这个Github问题的Sass语言：

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