切换scss变量文件

我试图通过改变颜色在夜间模式和白天模式之间切换。我的

\u colors.scss

中有一些基本颜色变量，它们在我的网站上随处可见。在项目的第一个div中，我使用React在“夜间模式”和“日间模式”之间切换类名
我曾尝试用提到的类名包装变量，但结果是没有其他文件可以访问这些变量。因此，我希望有一个解决方案，我可以使用一个夜间模式文件和一个日间文件，并在它们之间切换

---

正如我现在看到的，问题是我不能用类名包装$variables或@import，这使得我很难知道选择了什么模式。我正在寻找一个不包含jQuery的解决方案（我全局存储了一个变量，如果最终成为最佳解决方案，它可以用于javascript引用）

不能在运行时切换scss文件，因为它们已经编译为css

我会使用CSS自定义属性（有时称为CSS变量），而不是纯粹的Sass变量

例如：

:root {
  --background: lightblue;
}


.night-mode {
  --background: darkblue;
}

.component {
  background-color: var(--background);
}

根据一天中的时间，使用javascript打开class.night模式

当然，您可以从scss文件中的Sass变量提供CSS自定义属性：

$bg-day: lightblue;
$bg-night: darkblue;

:root {
  --background: $bg-day;
}

.night-mode {
  -- background: $bg-night;
}

.component {
  background-color: var(--background);
}

---

您不能在运行时切换scss文件，因为它们已经编译为css

我会使用CSS自定义属性（有时称为CSS变量），而不是纯粹的Sass变量

例如：

:root {
  --background: lightblue;
}


.night-mode {
  --background: darkblue;
}

.component {
  background-color: var(--background);
}

根据一天中的时间，使用javascript打开class.night模式

当然，您可以从scss文件中的Sass变量提供CSS自定义属性：

$bg-day: lightblue;
$bg-night: darkblue;

:root {
  --background: $bg-day;
}

.night-mode {
  -- background: $bg-night;
}

.component {
  background-color: var(--background);
}

---

我还没有时间实现它，但是我已经对CSS变量做了一些研究，因为这不是我熟悉的概念。似乎是正确的答案，我还想添加这个链接，以防有人在这个问题上绊倒：我还没有时间实现它，但我对CSS变量做了一些研究，因为这不是我熟悉的概念。似乎是正确的答案，我还想添加此链接，以防有人在这个问题上绊倒：