Sass中的混合

SASS 中的混合和 LESS 中也一样，只是定义格式和调用的格式不同

• LESS 中混合定义：.混合名称{} 或者 .混合名称(){}
• LESS 中混合调用：.混合名称; 或者 .混合名称();
• SASS 中混合定义：@mixin 混合名称{}; 或者 @mixin 混合名称(){};
• SASS 中混合调用：@include 混合名称; 或者 @include 混合名称();

@mixin center() {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.father {
  width: 300px;
  height: 300px;
  background: red;
  @include center();

  .son {
    width: 200px;
    height: 200px;
    background: blue;
    @include center();
  }
}