切换scss变量文件

Question

我试图仅通过更改颜色在夜间模式和白天模式之间进行切换。 我的_colors.scss内部有一些基础颜色变量，它们在我的整个网站上都使用过。 我使用React在项目的第一个div上在'night-mode'和'day-mode'之间切换className。
我试图将变量包装在提到的类名中，但是结果是没有其他文件可以访问变量。 因此，我希望找到一种解决方案，在其中可以使用夜间模式文件和白天文件，并在它们之间进行切换。

正如我现在看到的那样，问题在于我无法将$ variables 或 @import包装在类名中，这使得很难知道选择了哪种模式。 我正在寻找一个不包含jQuery的解决方案（我有一个全局存储的变量，如果最终成为最佳解决方案，则可用于javascript参考）。

Answer 1

您无法在运行时切换scss文件，因为它们已被编译为css。

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

例：

:root {
  --background: lightblue;
}


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

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

根据一天中的时间，使用javascript切换.night-mode类。

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

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

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

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

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