Sass-@if,@else if的用法

最新推荐文章于 2024-08-29 23:22:21 发布

BraveWangDev

最新推荐文章于 2024-08-29 23:22:21 发布

阅读量5.3k

点赞数 1

分类专栏：【完结】Sass基础知识与应用

本文链接：https://blog.csdn.net/ABAP_Brave/article/details/54893146

版权

【完结】Sass基础知识与应用专栏收录该内容

12 篇文章 1 订阅

订阅专栏

结合之前的Sass的混合-@mixin,@include,加入@if的相关语法

sass文件内容 common.scss


// 画三角形@mixin声明
@mixin sj($fx:top,$size:100px,$color:red){

  @if ($fx == top) {
    border-color: transparent transparent $color transparent;
    border-style: dashed dashed solid dashed;
  }
  @else if($fx == right){
    border-color: transparent transparent transparent $color;
    border-style: dashed dashed dashed solid;
  }
  @else if($fx == bottom){
    border-color: $color transparent transparent transparent;
    border-style: solid dashed dashed dashed;
  }
  @else if($fx == left){
    border-color: transparent $color transparent transparent;
    border-style: dashed solid dashed dashed;
  }

  width: 0px;
  height: 0px;
  overflow: hidden;
  border-width: $size;

}

//mixin的调用
.demo{
  @include sj(left);
}

sass编译后:

.demo {
  border-color: transparent red transparent transparent;
  border-style: dashed solid dashed dashed;
  width: 0px;
  height: 0px;
  overflow: hidden;
  border-width: 100px; }

新建测试页面 sass.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style/common.css" type="text/css">
</head>
<body>
    <div class="demo"></div>
</body>
</html>