Sass 混合指令mixin

合集 - sass(6)

1.Sass变量-------持续更新2023-12-272.Sass数据类型2023-12-273.Sass继承2023-12-274.Sass函数与调试----持续更新2023-12-275.Sass控制指令2023-12-27

6.Sass 混合指令mixin2023-12-27

收起

目录

• 定义mixin
• 引用mixin
• 参数
• 传递多值参数
• 传递内容
• 指令简写

混合指令mixin是可以重用的一组CSS声明。mixin有助于减少重复代码，只需声明一次，就可在文件中引用。它有点类似于变量，但与变量不同的它可以定义一个样式片段，还可以像函数那样定义参数。

定义mixin

混合指令的用法是在 @mixin 后添加名称与样式，例如：

@mixin cont{
    color:red;
    size:13px;
}

引用mixin

引用mixin需要使用@include指令，例如引用上面例子中的混合指令：

body{
    @include cont;
}

编译结果如下:

body{
    color:red;
    size:13px;
}

参数

参数用于给混合指令中的样式设定变量，并且赋值使用。在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里。引用指令时，按照参数的顺序，再将所赋的值对应写进括号：

@mixin cont($color:red,$size:13px){
    color:$color;
    size:$size;
}
body{
    @include cont(green,15px);
}

参数变量后面跟一个冒号可以设定参数默认值

编译结果如下:

body{
    color:green;
    size:15px;
}

传递多值参数

传递多值参数需要对参数进行 ... 运算，例如：

@mixin cont($shadow...){
    box-shadow:$shadow;
}
 
.header{
    @include(0px 4px 4px #555,2px 6px 10px #fff);
}

编译结果如下:

.header{
    box-shadow:0px 4px 4px #555,2px 6px 10px #fff;
}

传递内容

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

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}
 
//编译为
 
* html #logo {
  background-image: url(/logo.gif);
}
 

指令简写

为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示