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

Posted 2023-03-25

【中文标题】如何将scss变量设置为css变量使用javascript

【英文标题】：How to set scss variable to css variable use 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 变量时不起作用。