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

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

• 除非必要，不然不需要括號；
• 務必在?@if?之前添加空行；
• 務必在左開大括號({)后換行；
• @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 {
  // ...
}

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

// 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;
  }
}

如果你喜歡 Sass Guidelines，請支持它

?支持 Sass Guidelines