scss基础

变量

嵌套写法

混合宏 ， 调用混合宏

• 混合宏的不足：会生成冗余代码块，导致多余语句。(可以使用@extend解决)

// 不带参数的混合宏
@mixin border{
  border:1px solid red;
}
.box[
  @include border;
}

// 带参数的混合宏  （可以传多个参数）
@mixin border($bb){
  border:$bb solid #ddd;
}

.box{
  @include border(2px)
}

// 默认值混合宏
@mixin border($bb:2px){
  border:$bb solid #ddd;
}

.box{
  @include border
}

// 复杂混合宏
@mixin border($value){
  @if ($value > 1){
    border:1px solid red;
  } @else{
    border:2px solid yellow;
  }
}

.box{
  @include border(0)    //  border:2px solid yellow;
}

继承(@extend)

.btn{
  color:#fff;
  font-size:12px;
}
.box{
  border:1px solid #fefefe;
  // 继承(@extend)
  @extend .btn;
}

// 编译后代码如下:
.btn , .box {
  color:#fff;
  font-size:12px;
}
.box{
  border:1px solid #fefefe;
}

占位符 (%placeholder)

• 如果占位符中的样式没有被@extend调用的话，则不会产生任何代码。

以上总结

三者区别