mixins

混合指令（Mixin）用于定义可重复使用的样式，混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。

定义与使用混合指令 @mixin

@mixin mixin-name() {
  /* css 声明 */
  // 写所有css
  // 大部分scss语法
}

例 1：标准形式

• 定义

// 定义页面一个区块基本的样式
@mixin block {
width: 96%;
margin - left: 2%;
border - radius: 8px;
border: 1px #f6f6f6 solid;
}

• 使用 通过@include xxxx

// 使用混入
.container {
  .block {
    @include block;
  }
}

例 2：嵌入选择器

// 定义警告字体样式,下划线（_）与横线（-）是一样的
@mixin warning-text {
  .warn-text {
    font-size: 12px;
    color: rgb(255, 253, 123);
    line-height: 180%;
  }
}

• 使用混入

// 使用混入
.container {
  @include warning-text;
}

• 编译结果

.container .warn-text {
  font-size: 12px;
  color: #fffd7b;
  line-height: 180%;
}

例 3：使用变量

// 定义flex布局元素纵轴的排列方式
@mixin flex-align($aitem) {
  -webkit-box-align: $aitem;
  -webkit-align-items: $aitem;
  -ms-flex-align: $aitem;
  align-items: $aitem;
}

• 使用

// 只有一个参数，直接传递参数
.container {
  @include flex-align(center);
}
// 给指定参数指定值
.footer {
  @include flex-align($aitem: center);
}

例 4：使用变量（多参数）

// 定义块元素内边距
@mixin block-padding($top, $right, $bottom, $left) {
  padding-top: $top;
  padding-right: $right;
  padding-bottom: $bottom;
  padding-left: $left;
}

• 使用一

// 按照参数顺序赋值
.container {
  @include block-padding(10px, 20px, 30px, 40px);
}

• 使用二

// 可指定参数赋值
.container {
  @include block-padding($left: 20px, $top: 10px, $bottom: 10px, $right: 30px);
}

• 只想设置两个边：

// 可指定参数赋值
.container {
  @include block-padding($left: 10px, $top: 10px, $bottom: 0, $right: 0);
}

问题：必须指定 4 个值

例 5：指定默认值

// 定义块元素内边距，参数指定默认值
@mixin block-padding($top: 0, $right: 0, $bottom: 0, $left: 0) {
  padding-top: $top;
  padding-right: $right;
  padding-bottom: $bottom;
  padding-left: $left;
}

• 灵活使用

// 可指定参数赋值
.container {
  // 不带参数
  //@include block-padding;

  //按顺序指定参数值
  //@include block-padding(10px,20px);

  //给指定参数指定值
  @include block-padding($left: 10px, $top: 20px);
}

例 6：可变参数

• 参数不固定的情况

/**  
 *定义线性渐变  
 *@param $direction 方向  
 *@param $gradients 颜色过渡的值列表  
 */

@mixin linear-gradient($direction, $gradients...) {
  background-color: nth($gradients, 1);
  background-image: linear-gradient($direction, $gradients);
}

• 使用

.table-data {
  @include linear-gradient(to right, #f00, orange, yellow);
}

@mixin 混入总结

• mixin 是可以重复使用的一组 CSS 声明
• mixin 有助于减少重复代码，只需声明一次，就可在文件中引用
• 混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。
• 使用参数时建议加上默认值