條件語(yǔ)句

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

無(wú)論何時(shí)，如果你感覺(jué)需要它們，請(qǐng)遵守下述準(zhǔn)則：

• 除非必要，不然不需要括號(hào)；
• 務(wù)必在?@if?之前添加空行；
• 務(wù)必在左開(kāi)大括號(hào)({)后換行；
• @else?語(yǔ)句和它前面的右閉大括號(hào)(})寫(xiě)在同一行；
• 務(wù)必在右閉大括號(hào)(})后添加空行，除非下一行還是右閉大括號(hào)(})，那么就在最后一個(gè)右閉大括號(hào)(})后添加空行。

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

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

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

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

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

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

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

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

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

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

  @return false;
}

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

如果你喜歡 Sass Guidelines，請(qǐng)支持它

?支持 Sass Guidelines