條件語句

你可能早已知曉，Sass 通過 @if 和 @else 指令提供了條件語句。除非你的代碼中有偏復(fù)雜的邏輯，否則沒必要在日常開發(fā)的樣式表中使用條件語句。實(shí)際上，條件語句主要適用于庫和框架。

無論何時，如果你感覺需要它們，請遵守下述準(zhǔn)則：

除非必要，不然不需要括號；
務(wù)必在 @if 之前添加空行；
務(wù)必在左開大括號({)后換行；
@else 語句和它前面的右閉大括號(})寫在同一行；
務(wù)必在右閉大括號(})后添加空行，除非下一行還是右閉大括號(})，那么就在最后一個右閉大括號(})后添加空行。

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

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

測試一個錯誤值時，通常使用 not 關(guān)鍵字而不是比較與 false 或 null 等值。

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

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

通常將變量置于語句的左側(cè)，而將結(jié)果置于右側(cè)。如果使用相反的順序，通常會增加閱讀難度，特別是對于沒有經(jīng)驗(yàn)的開發(fā)者。

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

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

當(dāng)使用條件語句并在一些條件下有內(nèi)聯(lián)函數(shù)返回不同結(jié)果時，始終要確保最外層函數(shù)有一個 @return 語句。

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

  @return false;
}

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