SASS | @if 和 @else

SASS 是一种 CSS 预处理器，它的一大特点就是可以使用条件语句来实现动态样式的编写。其中的 @if 和 @else 就是常用的两个条件语句。

@if

@if 语句用于判断某个条件是否成立，如果成立则执行相应的样式语句，否则跳过。语法如下：

@if condition {
  // 如果 condition 成立，则执行这里的样式语句
}

其中的 condition 是一个逻辑表达式，可以使用比较、逻辑、算术等操作符。如果 condition 的值为真，则执行花括号内的样式语句。

下面是一个简单的示例，当变量 $color 的值为 red 时，将 body 元素的背景色设置为 red：

@if $color == red {
  body {
    background-color: $color;
  }
}

@else

有时候我们还需要在 condition 不成立时执行另一段样式语句，这时候就需要用到 @else 语句了。它的语法如下：

@if condition {
  // 如果 condition 成立，则执行这里的样式语句
} @else {
  // 如果 condition 不成立，则执行这里的样式语句
}

其中的 @else 和 } 之间不能有空格，否则会编译出错。

下面是一个简单的示例，在变量 $color 的值为 red 时，将 body 元素的背景色设置为 red，否则设置为 yellow：

@if $color == red {
  body {
    background-color: $color;
  }
} @else {
  body {
    background-color: yellow;
  }
}

总结

@if 和 @else 语句是 SASS 条件语句中最基础的两个，但是它们可以组合使用，构建出更为复杂的条件语句，例如多个条件的嵌套、多个条件的并行等等。熟练掌握这两个语句的使用方法，可以让 SASS 编写起来更加灵活、高效。