Sass的@if仅在编译期根据变量值静态执行，不响应运行时状态；所谓“不生效”实为变量值错误、作用域混淆或误用CSS自定义属性所致。
Sass 的 @if 从不“不生效”——它总在编译时按变量值执行完毕；你看到的“没效果”，其实是变量值不对、作用域错了，或误以为它能读 CSS 属性。
为什么@if判断布尔值总是走错分支
Sass 的“真值”和 JavaScript 完全不同：只有 null 和 false 是假值，0、""（空字符串）、()（空列表）全部算真值。
- 写
@if $enabled == true很危险——如果$enabled是1或"yes"，条件仍为真，但语义上你可能想排除它们 - 更安全的做法是显式比类型：
@if $enabled == "true"（字符串）或@if $enabled == true（仅当确定传入的是布尔字面量） - 用
@debug $enabled放在@if前，确认它确实是你要的值和类型；否则你以为是false，实际是""或未定义变量
为什么@if无法响应--theme这类 CSS 自定义属性
@if 运行在构建阶段，而 --theme 是浏览器运行时才解析的 CSS 变量。Sass 根本看不到它，连 var(--theme) 都只是普通字符串，不会触发求值。
- 错误写法：
@if var(--theme) == "dark" { ... }→ 编译直接报错，因为var()不是 Sass 函数 - 错误写法：
@if $theme == var(--theme) { ... }→$theme是 Sass 变量，var(--theme)是纯文本，永远不等 - 正确思路：把主题决策交给运行时机制，比如
@media (prefers-color-scheme: dark)或 JS 切换body.theme-dark类，再用对应 CSS 规则
为什么注入 CSS 变量后@if分支生成的样式“看起来没变”
常见于用 Sass 变量生成 CSS 自定义属性，再指望运行时切换生效——但 @if 分支早已固定，CSS 变量值又没被正确继承或覆盖。
立即学习“前端免费学习笔记（深入）”；
- 典型陷阱：
--color: #{$primary};中$primary是 Sass 变量，但若它本身依赖另一个未定义变量，编译就失败；或者单位丢失，如--gap: #{$base-gap};缺少px，导致 CSS 解析为无效值 - 嵌套注入易出错：比如在
@if $mode == "dark" { :root { --text: #fff; } }里写，但外部还有个同名:root { --text: #000; }，后者会覆盖前者——CSS 层叠规则照常生效，和@if无关 - 调试关键点：打开浏览器开发者工具，看最终计算出的
--text值是多少、来自哪条规则；别只盯着 Sass 源码猜
最常被忽略的复杂点：Sass 编译结果里没有 @if 痕迹，所有分支都已展开为静态 CSS。一旦你没在变量声明处加注释说明 $mode 控制哪几组样式，半年后自己都找不到为什么暗色模式下某个边框突然没了圆角。
