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);
}
image-20210815205603348
image-20210815205627483
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
暂无评论
推荐阅读
相关推荐
sass的条件判断篇
更多 >
腾讯云开发者
