如何将css变量更改为scss颜色类型？

我将css变量添加到root，因为我想使用JS动态更改它

#root {
  --primary-color: #4c5b73;
}

$primary-color: var(--primary-color) !default;

.my-component {
 background-color: transparentize($primary-color, 0.85);
}

我想使用基本的scss功能

透明化

或

较亮

或

较暗

但是我遇到了这个错误

我怎么知道这是一种颜色类型

更新 我应该早点做

---

您将使用

getComputedStyle

和

getPropertyValue

---

你应该得到你所需要的。：）

如果使用十进制RGB值而不是十六进制代码定义颜色，则可以在常规CSS中添加alpha通道：

：根目录{
--原色：76,91,7；
}
身体{
背景色：白色；
}
.我的部件{
背景色：rgba（var（--原色），0.15；
}

试验

不是首先声明

：root

变量，而是使代码如下所示。
您的代码流不正确。这可能对你有帮助。你应该研究一下这个

---

你是说如果用scss声明一个变量，它在编译后会转换成css变量吗？我不只是尝试做动态转换。CSS现在实际上有变量（从技术上讲，自定义属性就是它们）~95%的覆盖率。尝试

：root{}

而不是

#root{}

#root

选择

id

等于

root

的元素。这将创建一个作用域块。在这个块中声明CSS变量将使它成为只有块中的代码才能访问变量。如果不起作用，请在

：root{}

上方创建一个SCSS变量

$my color:#fff:

，并将CSS变量的值设置为与SCSS变量相等。@kahn谢谢！但这不是嵌套的问题，我更改了#root=>：root，但同样的错误您可以尝试放置

$primary color:#4c5b73在文件顶部，通过执行
--primarycolor:$primarycolor（请原谅任何错误，我不在计算机上）。@Khan它将在css
---primary color:$primary color
中生成。它不会编译code@khan是的，但是那样的话，不能通过改变根的颜色来改变所有的颜色。也许我应该放弃让它成为scss变量谢谢！这是一个正确的答案，但从技术上讲，这并不是问题的答案，因为它说的是“使用js”。@JoelHager这个问题并没有问如何用JavaScript实现，也没有用JavaScript标记。问题中的链接代码还表明OP在JavaScript中更改CSS变量的值方面没有问题，OP接受了我的答案。那么你的观点是什么？@JoelHager，因为其他答案表明我忽略了语法问题。但他们并没有提出解决我提出的问题的方案。我知道这个答案在技术上并没有建议如何将css变量与scss变量联系起来。至少它说明了如何避免这个问题。这就是我接受这个答案的原因。我感到很难过，没有找到技术解决方案。@Robby Cornelissen哇！！你是对的！！这是不可能的！为什么我没有意识到！！感谢您让我知道，这种方法的问题在于它编译了
的CSS。我的组件
到
背景色：rgba（76,91,115,0.15）。通过JavaScript更改
primary color
CSS变量的值不会影响
.my component
的CSS。
Argument `$color` of `transparentize($color, $amount)` must be a color

$primary-color: #4c5b73;

: root{
   --primary-color: #{$primary-color};
}

.my-component {
   background-color: transparentize($primary-color, 0.85);
}