scss预处理器 @mixin@include

scss 学习

scss预处理器使用 @mixin 来定义变量或方法，使用@include使用变量

// 定义变量
@mixin bordered {
  border: 1px solid red;
}

@mixin popCover {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.7);
}

@mixin translate($originX: 0px, $originY: 0px) { 
  // （定义方法，参数使用$开头的变量来定义使用冒号 ：添加默认值） 与js方法类似
  transform: translate($originX, $originY);
}

// 使用变量
.container {
  @include bordered;
}
.box{
  @include popCover;
}
.boxs{
  transform: translate(100px, 100px);
}

https://www.runoob.com/sass/sass-mixin-include.html