sass中@mixin与 @include

@mixin与 @include

• 一、定义与使用混入
• • 定义混入语法：
  • 使用混入语法：
  • 定义与使用混入demo
• 二、混入中也可以包含混入
• 三、向混入传递变量
• • 定于带变量的混入
  • 使用带变量的混入
• 四、混入变量可变参数
• • 定义可变参数混入
  • 使用可变参数混入

定义混入@mixin与 使用混入@include。

一、定义与使用混入

定义混入语法：

@mixin mixin-name样式名 {//...各属性}

使用混入语法：

selector { @include mixin-name}

定义与使用混入demo

// 定义混入demo:@mixin important-text {color: red; font-size: 25px; font-weight: bold; border: 1px solid blue;}//使用混入：.danger {@include important-text;background-color: red;}

上面代码转为css代码为：

.danger { color: red; font-size: 25px; font-weight: bold; border: 1px solid blue; background-color: green;}

二、混入中也可以包含混入

@mixin special-text { @include important-text; @include link; @include special-border;}

三、向混入传递变量

定于带变量的混入

@mixin bordered($color, $width) {border: $width solid $color;}

使用带变量的混入

.myArticle { @include bordered(blue, 1px);}

四、混入变量可变参数

当不能确定一个混入或者一个函数的参数个数，就可使用...来设置可变参数。

定义可变参数混入

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

使用可变参数混入

.shadows { @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);}