@if是Sass编译期指令，非运行时逻辑，用于生成CSS前决定样式取舍；它不响应用户交互，但可减少重复代码，配合@mixin封装组件变体最实用。
@if 是 Sass 编译期的条件控制指令，不是运行时的 CSS 逻辑。它在生成 CSS 之前就决定哪些样式该保留、哪些该丢弃——这意味着你无法用它响应用户交互或 DOM 变化，但能大幅减少重复代码和手动判断。
为什么 @if 不会在浏览器里执行
编译器（如 Dart Sass）读取 @if 时，直接计算其后的表达式（比如 1 + 1 == 2 或 $theme == "dark"），结果为 true 就输出对应块，false 就跳过。最终生成的 CSS 文件里根本看不到 @if，只有它“选中”的那部分样式。
- 常见错误现象：
@if $color == red { color: red; }报错，因为red被当作文本字面量，需写成"red"或预定义变量 - 参数差异：
@if后必须是 SassScript 表达式，不能是纯 CSS 属性值（如display: block） - 兼容性影响：完全不影响 CSS 兼容性，因为它不产出任何新语法，只影响输出内容
@if 配合 @mixin 控制组件变体
最实用的场景是封装带状态的组件，比如按钮尺寸、主题、禁用态。用 @mixin 接收参数，@if 分支处理：
@mixin btn($size: "md", $variant: "primary") {
padding: if($size == "sm", 4px 8px, if($size == "lg", 12px 24px, 8px 16px));
background-color: if($variant == "danger", #dc3545, #007bff);
@if $variant == "outline" {
background-color: transparent;
border: 1px solid #007bff;
}
@if $size == "lg" {
font-size: 18px;
}
}
- 使用场景：避免为每种组合手写一个类名，比如
.btn-lg-primary、.btn-sm-outline - 容易踩的坑：嵌套
if()函数时别漏括号；@if块内不能直接插值变量名（如#{&}--disabled要配合&父选择器引用） - 性能影响：无运行时开销，但过度嵌套会让 mixin 难以维护，建议分支不超过 3 层
@if 判断 map 或 list 结构时的注意事项
当你用 @each 遍历 map 时，常需要对 key 或 value 做条件过滤，这时 @if 必须配合 map-has-key()、index() 等函数：
$themes: ("light": #fff, "dark": #222, "high-contrast": #000);
@each $name, $color in $themes {
@if $name == "dark" or $name == "high-contrast" {
.theme-#{$name} {
color: invert($color);
background-color: $color;
}
}
}
- 常见错误现象：
@if $name == dark（漏引号）→ 编译失败；@if $name == "dark" or "high-contrast"→ 后半段恒为 true，逻辑错误 - 使用场景：按主题生成暗色适配样式、按设备断点生成媒体查询
- 为什么这样做：Sass 的 map 是静态结构，
@if是唯一能在遍历时做动态裁剪的方式
别把 @if 和 CSS 的 if() 函数搞混
CSS 原生的 if()（如 background: if(style(--f:3): red; else: green)）是运行时计算，依赖 @property 类型声明；而 Sass 的 @if 是编译期指令，两者生命周期、作用域、能力边界完全不同。
立即学习“前端免费学习笔记（深入）”；
- 容易踩的坑：在
.scss文件里写@if style(--f:3) { ... }→ 语法错误，style()是 CSS 函数，不被 Sass 解析 - 关键区别：
@if能调用function、操作map、生成选择器；CSSif()只能用于单个属性值，且必须配合@property - 复杂点在于：一旦项目里同时存在 Sass 条件和容器查询 /
@property条件，得清楚哪部分归编译器管、哪部分归浏览器管——前者决定“有没有这段 CSS”，后者决定“这段 CSS 生效不生效”
