VueJS & Vuetify - 如何在 Sass 中使用 JS 变量

Question

使用VueJS，我需要为每个用户显示不同的颜色。颜色取决于用户设置。

在我的vuetify.js中，我有：

export default new Vuetify({
theme: {
themes: {
light: {
primary: user.colorMain ? user.colorMain : '#F39200',

它在我使用时工作：

$vuetify.theme.themes.light.primary

在我的组件中。

但我也需要覆盖我的variable.scs文件中的Sass变量：

$primary-color: #f39200;

有没有一种方法可以从JS变量动态覆盖我的sass变量？

Answer 1

tl:dr不，不可能在运行时更改Sass变量值，因为它们在运行时已不存在。它们已被翻译成普通(静态(CSS。但是，与任何CSS值一样，您可以覆盖它们。

Sass变量仅用于在编译时将SCSS预处理为CSS。编译的结果是静态CSS，在安装应用程序时加载。简单地说，该应用程序不知道CSS是从SCSS源进行预处理的。对它来说，它是静态CSS。

示例：

$primary-color: #f39200;
.my-button { color: $primary-color; }

将输出以下CSS代码：

.my-button { color: #f39200; }

---

如果您想要运行时动态值，您有两个选项：

1. 使用CSS变量
   通过您喜欢的方法(来自SCSS/CSS/Styleus，无所谓，只要这是输出(生成以下CSS：

.my-button { color: var(--primary-color); }

并且，在父元素链中的任何位置或元素本身上：

<div :style="{'--primary-color': someDynamicColor }" />

有了以上内容，当您在运行时更改someDynamicColor时，color在DOM中也会更改。

2. 使用Vue3的"；反应式风格">功能：

<script>
export default {
data: () => ({ someDynamicColor: 'red' })
}
</script>
<style>
.my-button {
color: v-bind('someDynamicColor');
}
</style>

同样，这是动态的。如果更改元素上someDynamicColor的值/设置其动画，则CSS值将应用于DOM中。它不一定是data道具，它可以是prop、computed。。。

---

重要提示：

• 当使用CSS变量(1.(时，var(--primary-color)的值不必在同一组件中设置，但必须在当前DOM元素的直接祖先上设置
• 当使用反应式样式(2.(时，CSS/SCSS中引用的prop/computered必须在当前组件的范围中设置
• 在后台，反应式样式也使用CSS变量：它们在编译时是唯一命名的
• CSS变量不使用特殊性。如果您在父级覆盖某个祖父母设置的值，则无论特定性如何，子级都无法读取祖父母的值。如果您有这样的情况，您可能希望在外部状态下管理祖父母的值，并将其提供给祖父母和子女