【问题标题】：How can i change css variable to scss color type?如何将 css 变量更改为 scss 颜色类型？
【发布时间】：2020-07-20 10:31:04
【问题描述】：

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

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

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

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

我想使用基本 scss 功能transparentize 或lighter 或darker

但我收到了这个错误

Argument `$color` of `transparentize($color, $amount)` must be a color

如何判断这是一种颜色类型？

更新

我应该早点这样做
https://codepen.io/colton123/pen/bGVbRjP

【问题讨论】：

尝试:root {} 而不是#root {}。 #root 选择 id 等于 root 的元素。这将创建一个作用域块。在此块中声明 CSS 变量将使只有块内的代码可以访问该变量。如果这不起作用，请在 :root {} 上方创建一个 SCSS 变量 $my-color: #fff: 并将您的 CSS 变量的值设置为等于 SCSS 变量。
@kahn 谢谢！但这不是嵌套问题，我更改了 #root => :root 但同样的错误
您可以尝试将$primary-color: #4c5b73; 放在文件顶部并通过——primary-color: $primary-color; 声明一个CSS 变量（请原谅任何错误，我不在电脑上）.
@Khan 它将在 css 中生成 ---primary-color: $primary-color 它不会编译代码
@khan Yeap 但是这样，不能通过更改根颜色来更改所有颜色。也许我应该放弃让它成为一个 scss 变量

标签： css sass

【解决方案1】：

你会使用getComputedStyle和getPropertyValue

this solution 应该可以满足您的需求。 :)

【讨论】：

你是说如果用scss声明一个变量，编译后转换成css变量？我不只是尝试进行动态转换。
CSS 现在实际上有变量（自定义属性在技术上就是这样）。约 95% 的覆盖率。 caniuse.com/#feat=css-variables

【解决方案2】：

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

:root {
  --primary-color: 76, 91, 7;
}

body {
  background-color: white;
}

.my-component {
  background-color: rgba(var(--primary-color), 0.15);
}

<div class="my-component">
  Test
</div>

【讨论】：

谢谢！ ?? 它对我有用??，但我想收集更多答案。也许有更好的方法
这是一个正确的答案，但从技术上讲，它不是问题的答案，因为它声明要“使用 js”。
@JoelHager 这个问题没有问如何在 JavaScript 中做到这一点，也没有用 JavaScript 标记。问题中的链接代码还表明 OP 在 JavaScript 中更改 CSS 变量的值没有问题，并且 OP 接受了我的回答。那你的意思是什么？
@JoelHager 因为其他答案表明我错过了语法问题。但他们没有提出解决我提出的问题的方法。我知道这个答案在技术上并不建议如何将 css 变量与 scss 变量联系起来。至少它显示了如何避免问题。这就是我接受这个答案的原因。很遗憾没有找到技术解决方案。
@Robby Cornelissen 哇！！你说的对！！这是不可能的！为什么我没有意识到！！

【解决方案3】：

不是首先声明: root 变量，而是使代码像这样。
您的代码流不正确。它可能会帮助你。你应该研究这个article

$primary-color: #4c5b73;

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

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

【讨论】：

感谢您让我知道，? 但为了做我想做的事。我还在挣扎。 ??哦，我上传了一个代码迷?如果你不介意请尝试一下
这种方法的问题在于它将.my-component 的CSS 编译为background-color: rgba(76, 91, 115, 0.15);。通过 JavaScript 更改 primary-color CSS 变量的值不会影响 .my-component 的 CSS。