Mixins混合

1 .混合类选择器和id选择器-->最好是class选择器
2 .当调用混合集的时候，括号可以不加
3 .

不输出混合集

1 .创建一个混合集，但是不想让他输出到你的样式中，你可以在混合集的名字后面加上一个括号
2 .用在默认设置那里
3 .设置选择器混合集

.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

//输出
button:hover {
  border: 1px solid red;
}
//所有hover样式

4 .命名空间混合->不需要
5 .!important关键字：在调用的混合集后面追加!important关键字，可以使混合集里面所有的属性都继承自!important->不推荐
6 .

带参数的混合声明

1 .属性变量就像函数参数一样需要传入，使用的时候需要传入实体参数
2 .没有必要吧。

带默认参数的混合声明

1 .调用的时候可以传参也可以不传，如果不传的话会被编译成默认参数
2 .

模式匹配

1 .根据传入的参数来匹配对应的样式
2 .

普通混合

.border(){
//混合名后加了括号之后，编译出来的部分就没有这个了
    color:red;
}

#menu a{
    background: red;
    .border;
}
//编译后
#menu a {
  background: red;
  color: red;
}

加括号不带参数的混合

1 .就是不编译那一部分

带参数的混合

.border(@color){
    color:@color;
}

a{
    .border(red)
}

//
a {
  color: red;
}

带参数且有默认值的混合

.border(@color:#fff){
    color:@color;
}

a{
    .border;
}
//
a {
  color: #fff;
}

多个参数的混合

1 .使用的时候，每一个参数都是分号相隔就可以,逗号的话就视为一个参数了
2 .定义的时候也是使用分号算了，统一
.border(@color:#fff;@fontSize:16px){
    color:@color;
    font-size: @fontSize;
}

a{
    .border(red;12px);
}
//

a {
  color: red;
  font-size: 12px;
}
3 .定义相同名称的混合，less会根据参数调用进行相应的选择，但是实际没必要吧
4 .使用的时候传入命名参数，这样就不用严格按照参数顺序去使用了，有更大的灵活性
5 .@arguments变量。调用的时候表示所有传入的参数
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
    box-shadow: @arguments;
  }
.box-shadow(2px, 5px);
//
box-shadow: 2px 5px 1px #000;
 -moz-box-shadow: 2px 5px 1px #000;
  -webkit-box-shadow: 2px 5px 1px #000;

匹配模式:自定义一个字符，使用时加上那个字符，就调用相应的规则

1 .感觉没有必要，还不如多写一个呢，这样反而更加困难了

得到混合变量的返回值:这个好像没搞出来

.average(@x, @y) {
  @average((@x + @y)/2);
}

div {
  .average(16px, 50px);
  padding: @average;
}

//编译结果
div {
  padding: 33px;
}
/*
1、将16px 和 50px 赋值给混合 .average进行计算
2、计算结果赋值给变量 @average
3、然后在div中调用@average的值
4、编译后就得到了average的值33px
*/