条件语句

你可能早已知晓，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)