条件语句

优质

小牛编辑

142浏览

2023-12-01

你可能早已知晓，Sass 通过 @if 和 @else 指令提供了条件语句。除非你的代码中有偏复杂的逻辑，否则没必要在日常开发的样式表中使用条件语句。实际上，条件语句主要适用于库和框架。

无论何时，如果你感觉需要它们，请遵守下述准则：

除非必要，不然不需要括号；
务必在 @if 之前添加空行；
务必在左开大括号({)后换行；
@else 语句和它前面的右闭大括号(})写在同一行；
务必在右闭大括号(})后添加空行，除非下一行还是右闭大括号(})，那么就在最后一个右闭大括号(})后添加空行。

// Yep
@if $support-legacy {
  // …
} @else {
  // …
}

// Nope
@if ($support-legacy == true) {
  // …
}
@else {
  // …
}

// Yep
@if $support-legacy
  // …
@else
  // …

// Nope
@if ($support-legacy == true)
  // …
@else
  // …

测试一个错误值时，通常使用 not 关键字而不是比较与 false 或 null 等值。

// Yep
@if not index($list, $item) {
  // …
}

// Nope
@if index($list, $item) == null {
  // …
}

// Yep
@if not index($list, $item)
  // …

// Nope
@if index($list, $item) == null
  // …

通常将变量置于语句的左侧，而将结果置于右侧。如果使用相反的顺序，通常会增加阅读难度，特别是对于没有经验的开发者。

// Yep
@if $value == 42 {
  // …
}

// Nope
@if 42 == $value {
  // …
}

// Yep
@if $value == 42
  // …

// Nope
@if 42 == $value
  // …

当使用条件语句并在一些条件下有内联函数返回不同结果时，始终要确保最外层函数有一个 @return 语句。

// Yep
@function dummy($condition) {
  @if $condition {
    @return true;
  }

  @return false;
}

// Nope
@function dummy($condition) {
  @if $condition {
    @return true;
  } @else {
    @return false;
  }
}

// Yep
@function dummy($condition)
  @if $condition
    @return true

  @return false;

// Nope
@function dummy($condition)
  @if $condition
    @return true
  @else
    @return false