- SASS – 简介
- SASS – 环境搭建
- SASS – 使用Sass程序
- SASS – SASS – 语法
- SASS – SASS – 变量
- SASS – 局部文件(Partial)
- SASS – 混合(Mixin)
- SASS – @extend（继承）指令
- SASS – 操作符
- SASS – 函数
- SASS – 输出格式
mixin是可以重用的一组CSS声明。mixin有助于减少重复代码，只需声明一次，就可在文件中引用。
可以看出，mixin类似变量，不同的是变量存储值，mixin存储一组css声明。mixin可以传入参数。
要创建一个mixin，可以使用@mixin指令：
@mixin mixin-name() {
/* css 声明 */
}
一旦创建了mixin，就可以引用它，使用@include指令后跟mixin的名称：
...
@include mixin-name();
...
举例说明
mixin的一个常见用法是浏览器厂商前缀。
当浏览器厂商添加新的非标准CSS特性时，通常会标明厂商前缀，表示该特性只在特定浏览器上有效。
例如，-webkit-border-radius在Chrome和Safari浏览器有效，而-mozilla-border-radius在Firefox上有效。
对于这样的特性，通常需要包含所有浏览器的对应特性声明，以便兼容这些浏览器，这里就可以用minxin来实现：
@mixin border-radius() {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
}
aside {
border: 1px solid orange;
@include border-radius();
}
经过编译会输出以下css内容:
aside {
border: 1px solid orange;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px; }
mixin 参数
可以给mixin传入参数，mixin中的css声明将更加灵活。
示例：
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
aside {
border: 1px solid orange;
@include border-radius(7px);
}
经过编译会输出以下css内容:
aside {
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-ms-border-radius: 7px;
border-radius: 7px; }
mixin是sass中一个非常有用的功能。
