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