Angular中SCSS变量通过类切换不生效问题求助

问题出在Sass变量是预编译机制，和你想的运行时切换逻辑完全不搭：

• 手动修改全局$mode时，Sass在编译阶段就把所有用到$mode的地方直接替换成了default或dark对应的样式，所以能生效。
• 但在.dark-mode里重新定义$mode，这个变量只存在于该选择器的编译时局部作用域里——编译后这个变量就消失了，不会生成能在浏览器运行时根据类切换的逻辑。浏览器拿到的是编译好的静态CSS，根本不知道你原来的Sass变量是什么。

解决办法很简单，改用CSS自定义属性（也就是CSS变量），它是运行时生效的，能通过类选择器动态覆盖：

改造后的Sass代码 #

// 用Sass变量做默认值，定义全局CSS变量
:root {
  --theme-mode: #{$mode}; // 这里$mode是你原来的全局默认值
}

.dark-mode {
  --theme-mode: dark;
}

.light-mode {
  --theme-mode: default;
}

// 原来用到$mode的地方，改成引用CSS变量
// 示例：根据主题模式设置背景色
.page-container {
  background-color: var(--theme-mode) == dark ? #1a1a1a : #ffffff;
}

如果主题样式更复杂，直接把具体样式值定义成CSS变量更直观：

:root {
  --bg-primary: #ffffff;
  --text-primary: #333333;
}

.dark-mode {
  --bg-primary: #1a1a1a;
  --text-primary: #eeeeee;
}

// 使用时直接引用变量
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

这样你原来的HTML写法<div class="dark-mode"><router-outlet></router-outlet></div>就能正常生效了——浏览器会根据元素的类，动态应用对应的CSS变量值。

内容的提问来源于stack exchange，提问作者Ali Chavoshi