判断 @if、@else、@else if

约 1073 字大约 4 分钟

2025-04-11

在 Sass 中，@if、@else 和 @else if 是控制指令（Control Directives），用于根据条件判断动态生成不同的 CSS 样式。它们类似于其他编程语言中的条件语句，允许你基于变量、表达式或函数返回值控制代码的分支逻辑。

一、基本语法

1、`@if` 单独使用

@if <条件表达式> {
  // 条件为 true 时执行的代码
}

2、`@if` + `@else`

@if <条件表达式> {
  // 条件为 true 时执行
} @else {
  // 条件为 false 时执行
}

3、`@if` + `@else if`

@if <条件表达式> {
  // 条件为 true 时执行
} @else if <条件表达式> {
  // 条件为 true 时执行
}

4、`@if` + `@else if` + `@else`

@if <条件1> {
  // 条件1为 true 时执行
} @else if <条件2> {
  // 条件2为 true 时执行
} @else {
  // 所有条件为 false 时执行
}

二、核心用法与示例

1、简单条件判断

根据变量值生成不同的样式：

$theme: "dark";

.button {
  @if $theme == "dark" {
    background: black;
    color: white;
  } @else {
    background: white;
    color: black;
  }
}

编译后：

.button {
  background: black;
  color: white;
}

2、结合 `@else if` 处理多条件

根据屏幕尺寸生成响应式样式：

$screen-size: "tablet";

.container {
  @if $screen-size == "mobile" {
    padding: 10px;
  } @else if $screen-size == "tablet" {
    padding: 20px;
  } @else if $screen-size == "desktop" {
    padding: 30px;
  } @else {
    padding: 0;
  }
}

编译后：

.container {
  padding: 20px;
}

3、与函数或表达式结合

根据颜色亮度动态设置文本颜色：

@function get-text-color($bg-color) {
  @if lightness($bg-color) > 50% {
    @return black; // 背景色较亮时返回黑色文本
  } @else {
    @return white; // 背景色较暗时返回白色文本
  }
}

.box {
  background: #333;
  color: get-text-color(#333);
}

编译后：

.box {
  background: #333;
  color: white;
}

4、在混入（Mixin）中使用

根据参数生成不同的按钮样式：

@mixin button-style($type: "primary") {
  padding: 10px 20px;
  border: none;

  @if $type == "primary" {
    background: blue;
    color: white;
  } @else if $type == "danger" {
    background: red;
    color: white;
  } @else {
    background: gray;
    color: black;
  }
}

.btn-primary {
  @include button-style("primary");
}
.btn-danger {
  @include button-style("danger");
}

编译后：

.btn-primary {
  padding: 10px 20px;
  border: none;
  background: blue;
  color: white;
}

.btn-danger {
  padding: 10px 20px;
  border: none;
  background: red;
  color: white;
}

三、关键注意事项

1、条件表达式必须显式返回布尔值

表达式可以是：

比较运算（==, !=, >, <, >=, <=）
逻辑运算（and, or, not）
函数返回布尔值（如 variable-exists()）

错误示例：

$value: 10;
@if $value {
  // 错误！Sass 不会隐式转换数值为布尔值
  color: red;
}

2、作用域与变量访问

条件块内部可以访问外部变量：

$color: red;

.element {
  @if $color == red {
    border: 1px solid $color;
  }
}

3、避免过度嵌套

嵌套过多会降低代码可读性：

// 不推荐写法
@if $condition1 {
  @if $condition2 {
    // ...
  }
}

改进方案：

@if $condition1 and $condition2 {
  // ...
}

四、实际应用场景

1、主题切换

根据全局变量切换主题色：

$theme: "dark";

.header {
  @if $theme == "dark" {
    background: #333;
  } @else {
    background: #fff;
  }
}

2、响应式工具类生成

动态生成不同断点的媒体查询：

$breakpoints: (
  "sm": 576px,
  "md": 768px,
  "lg": 992px,
);

@mixin respond-to($size) {
  @if map-has-key($breakpoints, $size) {
    @media (min-width: map-get($breakpoints, $size)) {
      @content;
    }
  } @else {
    @error "未知的断点尺寸: #{$size}";
  }
}

.container {
  @include respond-to("md") {
    padding: 20px;
  }
}

3、组件状态控制

根据状态参数生成不同样式：

@mixin alert($status: "info") {
  padding: 10px;
  @if $status == "info" {
    background: #e7f3fe;
    border: 1px solid #6cb2eb;
  } @else if $status == "warning" {
    background: #fff3cd;
    border: 1px solid #ffd351;
  }
}

.alert-info {
  @include alert("info");
}

五、最佳实践

优先使用简单逻辑
避免复杂嵌套，必要时拆分逻辑到混合宏或函数中。
结合 Sass 内置函数
如 lightness()、darken()、map-get() 等增强条件判断能力。

错误处理
使用 @error 指令在条件不满足时抛出错误：

@mixin example($size) {
  @if $size > 0 and $size <= 10 {
    // 正常逻辑
  } @else {
    @error "参数 $size 必须介于 1 到 10 之间";
  }
}

六、总结

特性	说明
灵活性	根据变量、函数返回值或表达式动态生成样式
应用场景	主题切换、响应式设计、组件状态控制、动态工具类生成
优势	减少重复代码，增强样式的可配置性和可维护性
注意点	避免过度嵌套，确保条件表达式返回布尔值，优先使用简单逻辑

通过合理使用 @if 和 @else，可以显著提升 Sass 代码的动态性和可维护性，尤其适合需要高度可配置的样式系统（如主题、组件库等）。

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24