1. 基础用法

// 1.定义
@mixin normal-text {
    font-size: 20px;
    color: pink;
    font-weight: 700;
}
// 2. 使用
.block {
    @include normal-text;
}

2. 携带参数

// 定义
@mixin custom-text($font_size, $color){
    font-size: $font_size;
    color: $color;
    font-weight: 700;
}
//使用
//  按照形参顺序
.block {
    @include custom-text(20px, pink);
}
// 指定参数顺序
.block {
    @include custom-text($color: pink, $font_size: 20px);
}

mixin、if-else组合使用

// 定义
// $text-align: 对齐方式。
// 定义mixin时，可在形参后按照 " :默认值 " 的格式添加默认值
@mixin custom-text($text-align, $font_size: 20px, $color: pink){
    @if($text-align == left) {
        text-align = left;
    }
    @else-if($text-align == right) {
        text-align = right;
    }
    @else {
        text-align = center;
    }
    font-size: $font_size;
    color: $color;
}

// 使用
.block {
    @include custom-text(right, $color: pink, $font_size: 20px);
}

// 编译后的代码
.block {
    text-align: right;
    font-size: 20px;
    color: pink;
}