sass

全局变量，局部变量，默认变量

$width: 300px; //普通变量
$width: 100px; //后面覆盖了前面
$height: 50px;
$height: 200px !default; //默认变量
#div1{
  width: $width;
  height: $height;
}
//全局变量
$color: red;
#div2{
  background-color: $color;
  font-size: 30px;
  .box{
    $color: orange; //局部变量
    color: $color;
  }
  h2{
    color: $color;
  }
}
#div3{
  background-color: $color;
  font-size: 30px;
  .box{
    $color: orange !global; //全局变量
    color: $color;
  }
  h2{
    color: $color;
  }
}
//特殊变量
$xxx: left;
#div4{
  border-#{$xxx}: 1px solid black;
}

选择器嵌套

$fontSize: 20px; //规定 1em = 20px
//选择器嵌套
#div1{
  width: 100px;
  height: 200px;
  .box{
    background-color: red;
    font-size: 13px;
    a{
      text-emphasis: none;
      //& 父选择器
      &:hover{
        color: orange;
      }
    }
  }
}

sass混合—@mixin

//混合 清除浮动
// 让节点居中
@mixin center-block{
  display: flex;
  justify-content: center;
  align-items: center;
}
@mixin space-block{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
//清除浮动
@mixin clearBoth {
  content: "";
  height: 0;
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
}
@mixin border-bottom {
  position: relative;
  &::after {     //&代表给当前元素添加伪类
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #e9e9e9;
    transform: scaleY(0.5);
  }
}
ul{
  @include border-bottom;
  @include center-block;
  li{
    width: 100px;
    height: 100px;
  }
}
ol{
  @include space-block;
  li{
    background-color: red;
    @include clearBoth;
  }
}

sass继承扩展

.btn{
  width: 300px;
  height: 50px;
  background-color: yellow;
  border: 1px solid black;
  a{
    color: red;
    &:hover{
      background-color: blue;
    }
  }
}
.btn-success{
  @extend .btn;
  background-color: greenyellow;
}
.btn-danger{
  @extend .btn;
  background-color: red;
}

sass使用公共样式

//使用公共样式
//1、声明公共样式  _base.scss
//2、引入 @import "base"
@import "reset";
@import "mixin";
#div1{
  .box{
    @include border-bottom;
  }
}