[scss] 混合指令

混合指令

混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。

注意：这不是函数！没有返回值！！

一 定义混合指令

混合指令的用法是在 @mixin 后添加名称与样式，以及需要的参数（可选）。

// 格式：
@mixin name {
    // 样式....
}

// example：
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

二 引用混合样式

使用 @include 指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）。

// 格式：
@include name;

// 注：无参数或参数都有默认值时，带不带括号都可以

// example：
p {
    @include large-text;
}

// compile:
p {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
}

三 参数

格式：按照变量的格式，通过逗号分隔，将参数写进Mixin名称后的圆括号里

支持默认值；支持多参数；支持不定参数；支持位置传参和关键词传参

3.1 位置传参

@mixin mp($width) {
    margin: $width;
}

body {
    @include mp(300px);
}

3.2 关键词传参

@mixin mp($width) {
    margin: $width;
}

body {
    @include mp($width: 300px);
}

3.3 参数默认值

@mixin mp($width: 500px) {
    margin: $width;
}

body {
    @include mp($width: 300px);
    // or
    @include mp(300px);
}

3.4 不定参数

官方：Variable Arguments

译文：参数变量

有时，不能确定混合指令需要使用多少个参数。这时，可以使用参数变量 … 声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处理

@mixin mar($value...) {
    margin: $value;
}

四 向混合样式中导入内容

在引用混合样式的时候，可以先将一段代码导入到混合指令中，然后再输出混合样式，额外导入的部分将出现在 @content 标志的地方

可以看作参数的升级版

@mixin example {
    html {
        @content;
    }
}
@include example{
    background-color: red;
    .logo {
        width: 600px;
    }
}

// compile:
html {
  background-color: red;
}

html .logo {
  width: 600px;
}