是否可以将CSS变量保存到scss变量中？

Question

我更喜欢使用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)";

有没有解决此问题的想法吗？

Answer 1

所以与@Pete 合作，

您可以将 css 变量存储在 scss 变量中：

:root{
  --color: #000;
}

$color: unquote('var(--color)'); 

html{
  background-color: $color;
}