SASS - 混合(Mixin)

• 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中一个非常有用的功能。