混合 mixin

定义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;
}