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);
}