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();
  }
}