scss的@if仅在编译期根据预定义变量静态判断并输出对应css，无法响应运行时操作；其核心用途是按配置剔除冗余样式以减小文件体积，需确保变量已声明且值确定，支持@else if（非else if）及map-has-key()等安全校验方式。
SCSS中@if只能用在编译期，不能用于运行时样式切换
SCSS的@if是预处理器指令，在CSS生成阶段就完成判断并决定是否输出某段样式，它不会留下任何JavaScript或媒体查询逻辑。这意味着你无法用它响应用户点击、窗口缩放或主题切换——那些得靠CSS自定义属性或JS控制类名。
它的核心价值在于：根据配置变量、函数返回值或混合宏参数，静态地剔除不需要的CSS代码，减少最终文件体积。
- 常见错误现象：
@if $theme == 'dark' { color: white; }写在选择器内部但$theme未定义 → 编译报错Undefined variable - 必须确保判断依据（如变量、函数）在
@if执行前已声明且有确定值 - 不支持
else if写法，正确语法是@else if（注意中间有空格）
如何用@if配合$map实现多主题样式按需注入
比起硬编码多个@if分支，更健壮的做法是把主题配置抽象为map，再用map-has-key()和map-get()安全读取。
$themes: (
light: (bg: #fff, text: #333),
dark: (bg: #1a1a1a, text: #eee)
);
@mixin theme-styles($theme-name) {
@if map-has-key($themes, $theme-name) {
$theme: map-get($themes, $theme-name);
background-color: map-get($theme, bg);
color: map-get($theme, text);
} @else {
@warn "Unknown theme: #{$theme-name}";
}
}
.card { @include theme-styles(dark); }
- 避免直接
@if $theme-name == 'dark'——扩展性差，易拼错，且无法做存在性校验 -
map-has-key()比==判断更安全，尤其当主题名来自函数参数时 -
@warn能暴露配置缺失问题，比静默失败更容易调试
为什么@if嵌套在@mixin里比放在顶层更实用
顶层@if只能控制全局样式块是否生成，而混入内的@if能基于每次调用的参数动态决策，复用性高。
- 错误用法：在根作用域写
@if $debug { .debug-overlay { ... } }→ 整个项目要么全开要么全关，无法按组件启用 - 推荐做法：把
$debug作为混入参数，默认false，需要时显式传true - 性能影响：SCSS编译器会内联所有混入调用，
@if判断本身无运行时开销，但过度嵌套可能拖慢编译速度
容易被忽略的边界情况：空值、null和布尔转换陷阱
SCSS中false、null、''（空字符串）、()（空列表）都被视为“falsy”，但0、0px、0%}是“truthy”——这点和JavaScript完全不同。
$size: 0px;
@if $size { width: $size; } // ✅ 会被输出！因为 0px 是 truthy
@if $size == 0 { width: $size; } // ❌ 不会触发，因为 0px ≠ 0（单位不同）
- 判断数值是否为零，务必用
== 0或== 0px，别依赖@if $size -
null常用于表示“未配置”，用@if $value != null比@if $value更明确 - 函数返回
null时，map-get()查不到键也会返回null，这是安全的fallback机制
真正麻烦的是混合了单位的数值比较和嵌套map层级过深导致的map-get链式调用失败——这时候加一层@if map-has-key()校验比硬扛错误更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
