SCSS@if语句使用技巧详解

SCSS 的 `@if` 是一个强大的编译期条件指令，它在 CSS 生成前就精准决定哪些样式该保留、哪些该剔除，虽无法响应用户交互或 DOM 变化，却能显著减少重复代码、提升组件封装效率——尤其与 `@mixin` 结合时，可优雅实现按钮尺寸、主题色、禁用态等多维变体的自动化输出；同时需警惕常见陷阱：字符串必须加引号、不可混用 CSS 运行时函数、嵌套过深影响可维护性，而它与 CSS 原生 `if()` 的本质区别（编译期裁剪 vs 运行时计算）更是前端工程师必须厘清的关键分水岭。

@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、生成选择器；CSS if() 只能用于单个属性值，且必须配合 @property
• 复杂点在于：一旦项目里同时存在 Sass 条件和容器查询 / @property 条件，得清楚哪部分归编译器管、哪部分归浏览器管——前者决定“有没有这段 CSS”，后者决定“这段 CSS 生效不生效”

到这里，我们也就讲完了《SCSS@if语句使用技巧详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！