我擦，好安静，公司现在只剩下我一个人了，哈哈，可以尽情的敲击键盘了。

下面是关于less语法之混合，文章中有的变量名在本篇中找不到，是因为我定义在上一篇文章中，写的太长了，索性就将文章一块一块的写，这样标题看着比较清晰，如果看不太明白的话，可以按照顺序来看一看，上下联系一下就可以了。

关于less语法，我都写在同一个文集中，可以看看《less语法》文集；

三. 混合

关于混合，分一下三种情况：

• 不带参数；
• 带参数，无默认值；
• 带参数，同时设置默认值；

调用的时候存在的区别：

• 不带参数的，不加括号，直接使用；
• 带参数，无默认值的；调用的时候加括号，括号里必须传值，不然会报错；
• 带参数，有默认值的，调用的时候加括号，可传也可不传参数，不传参默认使用默认值，不会报错；

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

--------虽然感觉写东西，很浪费时间，但是每一次的总结，总会有新的意外收获，继续加油吧，呆萌小二郎！