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