@if只在编译时求值，不感知运行时状态，因此无法读取DOM、CSS变量、用户交互或媒体查询结果；它仅根据预定义Sass变量（如$theme: "dark"）在构建阶段决定是否输出对应CSS。
为什么 @if 编译后没生成对应 CSS
根本原因是 @if 只在编译时求值，不感知运行时状态。它看到的只是你写死的变量或函数返回值，不是 DOM、CSS 自定义属性、用户点击或媒体查询结果。
常见错误现象：
- 写了
@if $theme == "dark" { ... }，但$theme没声明或拼错成theme（漏$），报Undefined variable - 想根据
:root { --mode: dark; }切样式，但@if完全读不到--mode—— 它是浏览器运行时才解析的字符串，Sass 编译器连这个字符串都看不到 - 变量值是字符串
"false"或数字0，结果@if $flag { ... }仍执行了分支（Sass 中只有null和false是假值）
实操建议：
- 用
@debug $theme;确认变量存在且类型正确，再加type-of($theme)验证是不是string或bool - 比较字符串必须加引号：
@if $theme == "dark"，不能写@if $theme == dark - 所有条件分支必须覆盖完整逻辑，避免漏掉
@else导致某些配置下无样式输出
@if 的参数怎么写才不报错
错误信息如 Invalid CSS after "" 或 Expected expression，基本都是语法层面踩坑。
立即学习“前端免费学习笔记（深入）”；
关键规则：
- 必须用
$开头的变量名，@if $enable-hover { }✅，@if enable-hover { }❌ - 支持
and/or/not，但括号要配对：@if ($size == "lg") and ($border)✅，@if $size == "lg" and $border❌（部分 Sass 版本会报错） - 不能出现未定义符号：
@if $color == $primary中若$primary未声明，直接编译失败 - 不支持三元运算符用于属性值插值：
display: #{$flex ? "flex" : "block"}会报错，Sass 不支持这种运行时表达式
调试技巧：在 @if 前加 @debug "checking $theme:", $theme;，比猜强得多。
什么时候该用 @if，什么时候不该用
@if 的真实定位是“构建期开关”，不是“页面级条件渲染”。它适合处理那些在项目打包前就确定、且不会随用户操作变化的逻辑。
合适场景：
- 是否启用整套动画：
$enable-animation: false;→@if $enable-animation { transition: all .2s; } - 单位策略切换：
$unit: "rem";→font-size: 1#{$unit}; - 兼容性兜底：
$legacy-support: true;→ 输出 IE 专用 hack 规则
不合适场景：
- 响应用户点击切换主题色（该用 JS 控制 class + CSS 自定义属性）
- 根据
window.innerWidth动态调整布局（该用@media） - 判断某个 HTML 元素是否存在（Sass 根本不接触 DOM）
混淆这两类逻辑，是绝大多数 @if 误用的根源。
多个 @if 嵌套导致维护困难怎么办
三层以上 @if 嵌套会让源码难读、分支难覆盖、编译后 CSS 难追溯。更隐蔽的问题是：一旦某个变量未初始化，整个条件链可能静默跳过，最终样式缺失却无报错。
替代方案：
- 用
@function封装判断逻辑，例如：@function should-use-grid($config) { @return map-get($config, "grid") and not map-get($config, "legacy-support"); }，然后@if should-use-grid($config) { display: grid; } - 用
@each遍历 map 替代多层@if，尤其适合按钮、状态类等枚举型样式：@each $state, $style in $button-states { .btn-#{$state} { @include button-style($style); } } - 每个
@if块末尾加注释说明覆盖场景，例如// 当 $border-radius 为 null 时回退到默认圆角
真正容易被忽略的是：Sass 编译是一次性过程，改了变量文件但没触发重编译，@if 分支就永远不会更新 —— 构建工具通常不监听独立变量文件变更，得靠手动重启或配置额外 watcher。
