我擦，好安静，公司现在只剩下我一个人了，哈哈，可以尽情的敲击键盘了。
下面是关于less语法之混合，文章中有的变量名在本篇中找不到，是因为我定义在上一篇文章中，写的太长了，索性就将文章一块一块的写，这样标题看着比较清晰，如果看不太明白的话，可以按照顺序来看一看，上下联系一下就可以了。
关于less语法，我都写在同一个文集中，可以看看《less语法》文集；
三. 混合
关于混合，分一下三种情况：
- 不带参数；
- 带参数，无默认值；
- 带参数，同时设置默认值；
调用的时候存在的区别：
- 不带参数的，不加括号，直接使用；
- 带参数，无默认值的；调用的时候加括号，括号里必须传值，不然会报错；
- 带参数，有默认值的，调用的时候加括号，可传也可不传参数，不传参默认使用默认值，不会报错；
| 项目 | 不带参数 | 带参数，无默认值 | 带参数，有默认值 |
|---|---|---|---|
| 调用 | .border; | .border_test1(1px); | .border_test2(1px); |
| 调用时特殊情况 | .border_test1();//报错 | .border_test2();//使用默认值，不报错 | |
| --- | --- | 具体使用代码看下文 | --- |
3.1 less混合--不带参数
设置一个.box的 样式1：
.box {
width: @demo_width;
height: @demo_height;
background-color: @color_style;
font-size: 16px;
margin: 0 auto;
}
设置一个.border的 样式2：
.border {
border：2px solid red;
}
怎么使用混合使样式1也具有样式2的样式？
- 之前的做法肯定是找到
class='box'的元素，然后给追加一个border的类名，即class='box border' - 使用less的话，可以直接将这个类名添加到要被追加元素的样式里面即可
.box {
width: @demo_width;
height: @demo_height;
background-color: @color_style;
font-size: 16px;
margin: 0 auto;
// 混合写法（该注释不被保留）
/*混合写法（该注释被保留）*/
.border;
}
编译结果：
.box {
width: 300px;
height: 500px;
background-color: #E0EAFA;
font-size: 16px;
margin: 0 auto;
/*混合写法（该注释被保留）*/
border: 2px solid red;
}
同理，如果定义一个.box2的样式是在.box的基础上追加新样式，混合写法如下：
.box2 {
.box;
/*追加的样式*/
padding: 20px;
color: #393939;
}
3.2 less混合--带参数(不设置默认值)
可以传参数，参数可以写成一个变量，这样根据你的需要引用同一个类的样式，但传递参数不同，样式不同
注意： 如果不设置默认值的话，必须给它传参，不然是会报错的！！！
我们可以给它传递一个变量做参数，这样我们可以动态的变化这个值，如下：
.border_test1(@border_width) {
border: @border_width solid green;
}
举个栗子吧：
.box_test1 {
.border_test1(1px);
width: 100px;
height: 200px;
background-color: red;
}
.box_test2 {
.border_test1(2px);
width: 300px;
height: 200px;
background-color: yellow;
}
编译结果：
.box_test1 {
border: 1px solid green;
width: 100px;
height: 200px;
background-color: red;
}
.box_test2 {
border: 2px solid green;
width: 300px;
height: 200px;
background-color: yellow;
}
3.3 less混合--带参数（设置默认值）
相当于ES6语法中的设置变量，带参数默认值，如果有参数就使用参数，如果没有参数或者参数为undefined就使用默认值
这里我们给它传递变量做参数的同时设置默认值，如果有参使用参数，无参使用默认值代替，如下：
.border_test2(@border_width: 10px) {
border: @boeder_width solid pink;
}
举个栗子吧：
.box_text3 {
.border_test2(5px);
width: 200px;
height: 100px;
}
.box_test4 {
// 不传参使用默认值，有默认值的时候，不传参也不会报错
.border_test();
width: 150px;
height: 100px;
}
编译结果：
.box_text3 {
border: 5px solid pink;
width: 200px;
height: 100px;
}
.box_test4 {
border: 10px solid pink;
width: 150px;
height: 100px;
}
提示：
变量命名不冲突；
定义在border_test1中的
@border_width变量与定义在border_test2中的@border_width变量是不会互相冲突的;定义在border_test1中的
@border_width变量只在border_test1中起作用；同样，定义在border_test2中的
@border_width变量只在border_test2中起作用；设置变量传递参数的时候，有单位的一定要记得带上单位；
再来举个混合的栗子吧：
.border_radius(@radius: 10px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-o-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}
#box_radius_test {
width: 500px;
height: 500px;
background: green;
//带参混入,传参使用参，不传使用默认值
.border_radius();
}
编译结果：
#box_radius_test {
width: 500px;
height: 500px;
background: green;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
--------虽然感觉写东西，很浪费时间，但是每一次的总结，总会有新的意外收获，继续加油吧，呆萌小二郎！