条件语句

2018-02-24 15:11 更新

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

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号