【发布时间】：2023-04-08 14:53:01
【问题描述】：
我更喜欢使用 scss 变量，但不能在“运行时”更改它们。例如，如果我有一个 scss 变量 $color: #000;我想像这样改变它的值然后它就不起作用了：
html{
background-color: $color;
&.orange{
$color: orange;
}
}
另一方面，当我使用 css 变量时，它会：
:root{
--color: #000;
}
html{
background-color: var(--color);
&.orange{
--color: orange;
}
}
我知道原因，但我一个人无法解决这个问题。所以我的问题是：是否有可能以某种方式将 css var 存储在 scss var 中？
我已经尝试过的：
:root{
--color: #000;
}
$color: var(--color);
$color: ${'var(--color)'};
$color: "var(--color)";
知道如何在没有自定义函数的情况下解决这个问题吗？
【问题讨论】：
-
我想为我的页面设置主题，从我的角度来看，最简单的解决方案是更改我的主要变量的值。但只有改变 css 变量才能重新设计颜色运行时。
-
这应该可以工作：
$color: 'var(--color)';然后你像这样使用它：.colour { color: $color; }。对于您的橙色覆盖，您不能使用 sass var，您可以正常覆盖它：&.orange{ --color: orange; }} -
嗨@Pete！实时页面上的结果是： background-color: "var(--color)" 所以我用 unquote =>
$color: unquote('var(--color)');修改了你的代码，现在它可以工作了。谢谢！你能写一个关于这个的总结作为答案吗？ :) -
没关系，因为你必须做额外的你应该回答你自己的问题
-
您为什么要这样做？会有什么好处？您可以在 SCSS 中需要动态值的任何位置使用
var(--color)，而不是 $color。