第四节：SASS混合指令 (Mixin Directives)

SASS混合指令 (Mixin Directives)

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

定义与使用混合指令 @mixin

@mixin mixin-name() {
    /* css 声明 */
}

例1：标准形式

定义

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

使用

// 使用混入
.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;
}

例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 规则，甚至通过参数功能引入变量，输出多样化的样式。
• 使用参数时建议加上默认值