Sass @if

@if 是 Sass 中一个非常有用的控制指令，它允许我们根据条件执行不同的 CSS 代码块。通过使用 @if，我们可以创建动态和响应式的样式表，从而提高代码的可维护性和灵活性。

@if 的基本语法

@if 语句的基本结构如下：

@if <condition> {
  // 如果条件为真，则执行这里的代码
}

示例

假设我们要根据变量 $theme-color 的值来改变背景色，可以这样做：

$theme-color: blue;

.container {
  @if $theme-color == blue {
    background-color: blue;
  }
}

在这个例子中，如果 $theme-color 等于 blue，.container 类将具有 background-color 属性设置为蓝色。

使用 @else 扩展功能

@else 可以与 @if 结合使用，以便在条件不满足时执行另一段代码。这使得我们可以处理更多的场景和情况。

示例

// www.javascriptcn.com code example
$theme-color: red;

.container {
  @if $theme-color == blue {
    background-color: blue;
  } @else {
    background-color: red;
  }
}

这里，如果 $theme-color 不是 blue，则 .container 的背景色将被设置为红色。

使用 @else if 处理多种条件

当需要检查多个条件时，可以使用 @else if。这允许我们按照优先级顺序检查多个条件，并且只执行第一个满足的条件。

示例

// www.javascriptcn.com code example
$theme-color: green;

.container {
  @if $theme-color == blue {
    background-color: blue;
  } @else if $theme-color == green {
    background-color: green;
  } @else {
    background-color: black;
  }
}

在这个例子中，由于 $theme-color 被设置为绿色，因此 .container 将具有绿色背景色。如果 $theme-color 是其他颜色，将会应用默认的黑色背景色。

在循环中使用 @if

@if 也可以在 @for, @while, 或者 @each 循环中使用，这样可以实现更复杂的逻辑判断和样式生成。

示例：使用 @for 和 @if

@for $i from 1 through 5 {
  .item-#{$i} {
    width: 10px * $i;
    @if $i % 2 == 0 {
      background-color: lightgray;
    }
  }
}

这段代码将生成五个 .item-1 到 .item-5 的类，其中偶数编号的元素会有一个浅灰色的背景色。

总结

通过使用 @if、@else 和 @else if，我们可以轻松地在 Sass 中实现条件判断，从而生成更加动态和适应性强的 CSS 代码。这种灵活性使我们能够构建出更复杂、更高效的样式表，而无需编写大量的重复代码。