Scss----混合指令和函数指令

2020.12.24 15:56

01.混合指令

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

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

1.定义混合指令

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

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

@mixin color {
   
    font{
   
        size: 15px;
        font-weight: bold;
    }
    color: black;
}

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

格式：
@include name;

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

3.参数

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

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

a. 位置传参

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

body {
   
    @include mp(300px);
}

b.关键词传参

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