css - 切换 scss 变量文件

Question

我正在尝试仅通过更改颜色在夜间模式和白天模式之间切换。我的 _colors.scss 中有一些基本颜色变量，它们在我的整个站点中都被使用。我使用 React 在元素的第一个 div 中在“夜间模式”和“白天模式”之间切换类名。
我试图将变量包装在提到的类名中，但结果是没有其他文件可以访问这些变量。因此，我希望有一个解决方案，我可以使用夜间模式文件和白天文件并在它们之间切换。

正如我现在所看到的，问题是我无法将 $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);
}