Sass的@if指令可根据条件判断动态生成样式，提升代码灵活性与可维护性。通过@if、@else if、@else实现分支逻辑，如根据不同主题变量输出对应按钮样式；结合布尔变量控制调试样式开关；利用and、not、or构建多条件判断；在函数中返回不同值以集中管理样式数据。合理使用可增强逻辑性，但应避免过度嵌套以保持代码清晰。
在使用 Sass 编写 CSS 时，可以通过 @if 指令实现条件判断，动态生成不同的样式。这在构建可复用的组件或响应不同配置时非常有用。
基本语法：@if、@else if、@else
Sass 的 @if 指令允许你根据表达式的真假来决定是否输出某段样式。它支持标准的条件结构：
@if 条件 {// 条件为真时编译的样式
}
@else if 其他条件 {
// 其他条件为真时的样式
}
@else {
// 所有条件都不满足时的默认样式
}
例如，定义一个按钮混合宏，根据传入的主题类型应用不同背景色：
@mixin button-style($theme) {@if $theme == light {
background-color: white;
color: black;
}
@else if $theme == dark {
background-color: black;
color: white;
}
@else {
background-color: gray;
color: #333;
}
}
调用该 mixin：
立即学习“前端免费学习笔记（深入）”；
.btn-primary { @include button-style(light); }.btn-secondary { @include button-style(dark); }
编译后会生成对应的 CSS 样式，只保留符合条件的部分。
结合变量控制显示状态
你可以通过预设变量来控制整个项目的样式行为。比如定义一个调试模式开关：
$debug-mode: true; .my-component {
border: 1px solid #ccc;
@if $debug-mode {
outline: 2px dashed red;
opacity: 0.9;
}
}
当 $debug-mode 设为 false 时，调试样式完全不会出现在输出的 CSS 中，有助于上线前清理冗余样式。
使用布尔值和函数进行复杂判断
Sass 支持布尔运算，可以结合 not、and、or 构建更复杂的条件逻辑。
$has-border: true;$is-rounded: false; .element {
@if $has-border and not $is-rounded {
border: 2px solid blue;
border-radius: 0;
}
@else {
border-radius: 8px;
}
}
这种方式适合处理多个配置项组合的场景，如 UI 库中的组件变体控制。
在函数中使用 @if 返回不同值
@if 不仅可用于生成样式，还能在函数中返回不同计算结果：
@function get-font-size($level) {@if $level == h1 {
@return 2rem;
}
@else if $level == h2 {
@return 1.5rem;
}
@else {
@return 1rem;
}
} h1 { font-size: get-font-size(h1); }
这样可以在保持语义化的同时，集中管理样式值。
基本上就这些。Sass 的 @if 指令让样式编写更具逻辑性和灵活性，合理使用能显著提升代码可维护性。注意避免过度嵌套条件，保持清晰易读更重要。
