Sass 的 @if 仅在编译期根据预定义变量（如 $theme: dark）生成对应 CSS，无法响应运行时主题切换；真正可切换主题需结合 CSS 自定义属性与 JS 控制。
如何用 @if 根据主题变量生成不同 CSS 规则
直接说结论：Sass 的 @if 不能在运行时切换主题，它只在编译期起作用；你得靠预定义的主题变量 + 条件编译，提前生成多套 CSS 文件，或靠 CSS 自定义属性（--theme-color）配合 JS 切换——@if 只负责“哪套规则该进最终 CSS”。
常见错误是以为写个 @if $theme == 'dark' { ... } 就能响应用户点击切换，结果编译完就固定了，页面上再改变量也没用。
-
$theme必须是顶层已知的 Sass 变量（如$theme: dark;），不能是 JS 动态传入或 CSS 变量读取值 - 每个主题需单独编译一次，比如
sass --load-path=node_modules main.scss:css/dark.css --define=theme=dark - 若想单文件支持多主题，得把差异部分抽成
@mixin，再用@if控制 mixin 内部逻辑，而非直接包裹整段样式
为什么 @if 里不能用 var(--theme) 或 JS 值
因为 Sass 编译发生在浏览器加载 CSS 之前，所有 @if 判断都在 Node.js 或构建工具里完成，此时 document.body.style.setProperty 还没执行，getComputedStyle 更无从谈起。
典型翻车场景：有人写 @if var(--theme) == 'dark' { ... }，这语法本身就不合法——Sass 解析器根本不知道 var() 是啥，会直接报错 Invalid CSS after "if": expected expression。
立即学习“前端免费学习笔记（深入）”；
-
var(--x)是 CSS 运行时函数，Sass 编译器不识别，也不能参与逻辑判断 - 想让主题可切换，必须分两层：Sass 编译出含自定义属性的通用 CSS；JS 控制
document.documentElement.setAttribute('data-theme', 'dark')或设置style内联变量 -
@if唯一能安全依赖的，只有 Sass 本体变量、函数返回值（如type-of($x)）、以及内置函数（如lightness($color)）
@if 在主题色计算中的实际用法（比如自动选对比文字色）
这是 @if 真正擅长的场景：根据一个确定的主色变量，在编译时算出配套的文本色、边框色，避免手动维护多套调色板。
$primary: #2563eb;
$light-threshold: 150;
$text-on-primary: if(lightness($primary) > $light-threshold, #1e293b, #f1f5f9);
.primary-btn {
background-color: $primary;
color: $text-on-primary;
}
注意这里用的是 if() 函数（三元操作），不是 @if 指令——前者返回值可赋给变量，后者只能控制代码块是否输出。
- 用
if()处理颜色明度判断、尺寸缩放、断点适配等“单值决策”，简洁且可复用 - 用
@if处理“整块样式开关”，比如暗色模式下禁用 box-shadow：@if $theme == 'dark' { .card { box-shadow: none; } } - 别在
@if里写复杂嵌套逻辑，Sass 不支持 else-if 链式，超过两个分支建议用@function封装判断逻辑
多主题项目中 @if 最容易被忽略的兼容性坑
很多人用 @if 切换主题时，忘了 CSS 层叠和 specificity 的实际影响。比如：
@if $theme == 'dark' {
:root { --bg: #1e293b; }
.btn { background: var(--bg); } // 这里其实会被 :root 里的 --bg 覆盖
}
结果发现按钮背景没变——因为 .btn 里用的是 var(--bg)，而 :root 的声明在另一处，顺序和作用域导致未生效。
-
@if输出的 CSS 仍要遵守浏览器层叠规则，不能假设“后写的一定覆盖前写的” - 如果主题依赖 CSS 变量，
@if应集中输出:root块，而不是分散到各组件里改var() - Sass 3.4+ 支持
@at-root提升作用域，但对:root无效；真正可靠的是把主题变量统一塞进一个_theme.scss，用@import控制加载顺序
最麻烦的点往往不在 @if 语法本身，而在你默认它生成的 CSS 会“智能合并”——它不会。你写的每一条规则，都老老实实按源码顺序进最终 CSS，该被覆盖就被覆盖。
