如何利用Sass的@if指令根据主题切换不同的CSS样式

@if不能实现运行时主题切换，它仅在编译时根据预设常量决定输出哪些CSS，无法响应用户点击、prefers-color-scheme或localStorage等运行时状态；真正可切换的主题需结合Sass预设变量与JS修改class或CSS自定义属性实现。

@if 不能实现运行时主题切换，它只在编译时决定哪些样式进最终 CSS 文件。你点击按钮、监听 prefers-color-scheme 或读取 localStorage，@if 都看不见——它早在浏览器打开前就执行完了。

为什么 @if $theme == 'dark' 不会随用户操作变色

常见错误现象：@if 块里的样式没生效，或切主题后页面毫无反应。

• @if 在你运行 sass 命令或启动 Vite/Webpack 时就执行完毕，此时 document 根本不存在
• $theme 必须是编译期已知的常量（如 $theme: "dark";），不能来自 localStorage、prefers-color-scheme 或 JS 动态赋值
• 编译结果里不会保留 @if 结构，只有它“选中”的那部分 CSS 被写入输出文件，其余被直接丢弃
• 即使用 vue-cli-plugin-style-resources-loader 注入变量，也只是把变量提前塞进编译上下文，仍不等于运行时可变

@if 真正该用在哪几个地方

它适合构建时多版本打包，不是运行时控制。关键在于：你是否需要生成多份物理 CSS 文件。

• 为不同客户定制样式：@if $brand == "internal" { .header { background: #0052cc; } }
• 是否启用过渡动画：@if $enable-transitions { transition: all 0.2s ease; }
• 单位策略切换：@if $use-rem { font-size: 1rem; } @else { font-size: 16px; }
• 兼容性兜底：仅当 $legacy-support 为 true 时，才编译 IE11 专用 filter 规则

操作方式是用 CLI 分别跑两次编译：sass --define=theme=light main.scss:light.css 和 sass --define=theme=dark main.scss:dark.css。

立即学习“前端免费学习笔记（深入）”；

想让主题真能“切换”，必须分两层实现

第一层（Sass）：预设好语义变量和主题 map，比如 $theme-dark: ("text": #e0e0e0, "bg": #121212)，所有组件样式都通过 map-get($theme, "text") 取值；第二层（JS + CSS）：用 JS 修改 document.documentElement.classList 或设置 style="--bg-color: #121212"，再配对应 CSS 规则。

最容易被忽略的是：Sass 编译结果里没有 @if 的任何痕迹，一旦忘了注释清楚哪个变量控制哪条分支，半年后自己都看不懂为什么某个按钮突然变色了。