定义mixin
@mixin 名字(参数1...,参数2...){
...
}
通过@include 名字 调用mixin
@mixin alert {
color: red;
background-color: #fff;
//混合里面可以使用嵌套等
a{
color:#fff;
}
}
.alert-warning {
@include alert;
}
.alert-warning {
color: red;
background-color: #fff;
}
.alert-warning a {
color: #fff;
}
mixin使用参数
@mixin alert($text-color, $background) {
color: $text-color;
background-color: $background;
a {
color: darken($text-color, 10%);//darken()函数的作用是加深某一颜色的值
}
}
.alert-warning {
@include alert(green, yellow); //调用时注意顺序
}
}
.alert-info {
@include alert($background: red, $text-color: pink); //通过指定参数的值，不用注意顺序
}
.alert-warning {
color: green;
background-color: yellow;
}
.alert-warning a {
color: #004d00;
}
.alert-info {
color: pink;
background-color: red;
}
.alert-info a {
color: #ff8da1;
}
