Sass中的條件判斷

SASS 中的條件判斷和 LESS 一樣 SASS 中也支持條件判斷，只不過 SASS 中的條件判斷支持得更為徹底

SASS 中支持的條件判斷如下：

• @if(條件語句){}
• @else if(條件語句){}
• ... ...
• @else(條件語句){}

SASS 中當條件不為 false 或者 null 時就會執行 {} 中的代碼，和 LESS 一樣 SASS 中的條件語句支持通過 >、>=、<、<=、== 進行判斷，如下將通過之前 less 文章當中的小三角的案例來演示一下 sass 中的條件判斷如下：

@mixin triangle($dir, $width, $color) {
  width: 0;
  height: 0;
  border-width: $width;
  border-style: solid solid solid solid;
  @if ($dir == Up) {
    border-color: transparent transparent $color transparent;
  } @else if ($dir == Down) {
    border-color: $color transparent transparent transparent;
  } @else if ($dir == Left) {
    border-color: transparent $color transparent transparent;
  } @else if ($dir == Right) {
    border-color: transparent transparent transparent $color;
  }
}

div {
  @include triangle(Left, 50px, blue);
}