Sass @if 语句的基本概念与语法
@if 的基本用法与结构
在 Sass（SCSS 语法）中，条件编译通过 @if、@else if、以及 @else 来实现。条件表达式会被求值，结果决定选择哪一块样式代码执行。@if 不是运行期判断，而是在样式编译阶段确定哪组样式被输出。
理解这一点有助于编写可移植的组件风格和主题切换逻辑。布尔表达式、变量与 比较运算 共同构成条件。
$theme: dark;@if $theme == light {$bg: #fff;$fg: #111;
} @else {$bg: #111;$fg: #eee;
}与 CSS 变量的关系及兼容性
Sass 的 @if 可以与 $变量、Map、或直接写条件表达式结合使用，最终生成的 CSS 会依赖最终被输出的变量值。CSS 变量与 Sass 变量在作用域和编译阶段存在差异，理解两者的边界有助于混合使用。
在使用主题或响应式断点时，条件判断应尽量避免直接写死值，而是通过 变量 + 条件分支 来确定最终样式。下方代码展示一个把主题映射到样式的常见模式。
$themes: (light: (bg: #fff,color: #111),dark: (bg: #111,color: #eee)
);$active: dark;@if map-has-key($themes, $active) {$bg: map-get(map-get($themes, $active), bg);$color: map-get(map-get($themes, $active), color);
}逻辑运算符在 @if 语句中的正确使用方法
逻辑运算符的基本种类与表达式组合
在 Sass 中，逻辑运算符不是 C 风格的 &&、||，而是 and、or、以及 not。正确使用可以将多个条件合并成一个布尔表达式，简化判断逻辑。true 与 false 的区分在 Sass 的布尔判断中至关重要。
组合条件时可以直接写在同一 @if 语句中，或者通过括号提升表达清晰度。下例展示常见组合模式：
@if $width > 600 and $theme == light {.container { padding: 1rem; }
} @else if $width > 600 or $theme == dark {.container { padding: .75rem; }条件组合中的优先级与可读性
优先级在 Sass 的布尔运算中通常遵循自然语言的直觉，但长表达式应尽量拆分成多行，避免难以维护的“巨大 if”结构。把简单的布尔条件放在前面，复杂表达放在后面，有助于阅读与调试。
另一种实践是把复杂条件拆成若干 Map 映射 或 变量缓存，再通过简单条件判断输出最终样式。下面展示一个简短的拆分示例：
@if $has-controls and ($size == small or $size == medium) {.control { display: inline-flex; }
}实战场景：组件样式、主题与响应式设计中的应用
实战示例：按钮主题与状态管理
在按钮的主题实现中，@if 能帮助你在一个混入（mixin）中覆盖不同状态的样式。混入可以接收参数，条件分支根据主题输出不同的 CSS。这样可以避免写多份重复的 CSS。
例如，为按钮实现 热度高的主题，同时支持禁用状态，可以写成一个可复用的混入。下面给出一个典型场景的实现：
@mixin button-theme($theme, $disabled: false) {@if $theme == light {background-color: #fff;color: #111;} @else if $theme == dark {background-color: #333;color: #eee;}@if $disabled {opacity: .5;cursor: not-allowed;}
}将 @if 与 @each、Maps 结合提升维护性
当样式变体较多时，直接写大量 @if 可能导致维护困难。此时可以把变体信息放到 Map 中，通过 @each 进行遍历，结合 @if 做条件筛选，从而生成需要的样式集合。
利用 主题映射、断点映射，你可以在一个地方定义条件，在不同设备或主题切换时输出不同的样式。示例见下方：
$themes: (light: (bg: #fff,color: #111),dark: (bg: #111,color: #eee)
);@each $name, $conf in $themes {.btn--#{$name} {background: map-get($conf, bg);color: map-get($conf, color);}
}调试与维护：避免常见坑
调试技巧：使用 @debug、@warn 与 @error
在复杂的条件分支中，@debug、@warn、@error 能帮助你在编译阶段发现问题。尤其是在多分支和变量传递错误时，它们的提示信息非常关键。
例如，调试当前主题值或变量组合时，可以输出日志来定位问题。下面的示例演示如何在编译时打印调试信息：
@debug '当前主题: ' + $theme;
@if $theme != light and $theme != dark {@warn '不支持的主题：' + $theme;
}可维护性的最佳实践
保持条件分支的数量在一个可控范围内是重要的原则。模块化的混入与 Map 的使用能显著提升可维护性。将复杂条件包装成小型的、职责单一的块，有助于日后扩展。
