如何将scss变量设置为css变量使用javascript

【问题标题】：How to set scss variable to css variable use javascript如何将scss变量设置为css变量使用javascript
【发布时间】：2021-11-20 02:56:13
【问题描述】：

我想在 vue 的一个方法中将 scss 变量设置为 css 变量。

$color: #000;
--varColor: #{$color}

我想通过道具动态设置，但它不起作用。有谁知道如何做到这一点？谢谢

'--backgroundColor': `#{${props.backgroundColor}}`,

【问题讨论】：

【解决方案1】：

我认为你做不到。 SCSS 是一个CSS 预处理器，这里强调pre。因此，当您的代码执行时，SCSS 将不再存在，而是编译为 CSS。

但是您可以使用 JavaScript methods 像 style.setProperty 一样操作 CSS。

【讨论】：

感谢 Gh05d，因为在这种情况下，只需使用 scss 变量 ($color) 传递给子组件。当 setProperty css 变量等于 scss 变量时不起作用。