Sass预编译语言之@mixin混合的几种声明和调用方式

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。

声明的@mixin通过@include来调用。

1、声明一个没有参数的 @mixin,设置盒模式水平居中的样式

@mixin block-center {
margin-left:auto;
margin-right:auto;
}

调用方式：

@include block-center;

2、声明一个有参数的 @mixin,设置盒模式的宽和高

@mixin setSize($width, $height) {
width:$width;
height:$height;
}

调用方式一：

@include setSize(20px,20px);

调用方式二：

@include setSize($width:20px,$height:20px);

第二种方式传递的参数没有先后顺序；

3、声明一个有参数的并有默认值的 @mixin,设置icon小图标的尺寸

@mixin setIconSize($width:20px, $height:20px) {
width:$width;
height:$height;
}

调用方式一：

@include setIconSize;

调用方式二：

@include setIconSize(16px,16px);

调用方式三：

@include setIconSize($width:14px,$height:14px) or @include setIconSize($height:14px,$width:14px);

4、声明一个有多组参数的 @mixin,设置盒模式的阴影

@mixin box-shadow($shadow...) {
-webkit-box-shadow:$shadow;
box-shadow:$shadow;
}

调用方式：

@include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));

5、@content

@content在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。

它可以使@mixin接受一整块样式，接受的样式从@content开始

@mixin media-max-width-screen($max-device-width) {
@media screen and (max-device-width:$max-device-width) {
@content;
}
}

调用方式：

@include media-max-width-screen(320px) {

.box {
font-size:12px;
color:green;
}
}