你可能早已知曉,Sass 通過?`@if`?和?`@else`?指令提供了條件語句。除非你的代碼中有偏復雜的邏輯,否則沒必要在日常開發的樣式表中使用條件語句。實際上,條件語句主要適用于庫和框架。
無論何時,如果你感覺需要它們,請遵守下述準則:
* 除非必要,不然不需要括號;
* 務必在?`@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 {
// ...
}
~~~
通常將變量置于語句的左側,而將結果置于右側。如果使用相反的順序,通常會增加閱讀難度,特別是對于沒有經驗的開發者。
~~~
// 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](https://gum.co/sass-guidelines)
- 關于作者
- 貢獻
- 關于Sass
- Ruby Sass Or LibSass
- Sass Or SCSS
- 其他預編譯器
- 簡介
- 為什么需要一個樣式指南
- 免責聲明
- 核心原則
- 語法格式
- 字符串
- 數字
- 顏色
- 列表
- Maps
- CSS規則集
- 聲明順序
- 選擇器嵌套
- 命名約定
- 常量
- 命名空間
- 注釋
- 標示注釋
- 文檔
- 結構
- 組件
- 7-1模式
- Shame文件
- 響應式設計和斷點
- 命名斷點
- 斷點管理器
- 媒體查詢用法
- 變量
- 作用域
- !default標識符
- !global標識符
- 多變量或maps
- 擴展
- 混合宏
- 基礎
- 參數列表
- 混合宏和瀏覽器前綴
- 條件語句
- 循環
- Each
- For
- While
- 警告和錯誤
- 警告
- 錯誤
- 工具
- Compass
- 柵格系統
- SCSS-Lint
- 總結概要