Less学习笔记4：样式混合

混合

对于同一个页面元素：

<div class='box'></div>

在Less文件中设置box的宽度：

@test_width:300px;
.box{
    width:@test_width;
}

此时若还要给div这个元素加一个border的样式，

.border{
    border:soild 5p pink;
}

原来是：

<div class='box border'></div>

现在就可以：

<div class='box'></div>
.box{
    width:@test_width;
    .border
}

编译以后的.box为：

.box{
    width:300px;
    border:soild 5p pink
}

样式混合带参数

假设有一个border需要在不同的样式中需求不同

先写一个关于border的函数：

.border_function(@border_width){
    border:pink soild @border_width;
}

在使用的时候，需要传入一个border的宽度

.test_border{
    .border_function(20px);
}

Less编译后的结果为：

.test_border{
    border:pink soild 20px;
}

注意：此时必须要传入border_width，否则会报错

样式混合带一个默认值
先写一个关于border的函数：

.border_function_default(@border_width:20px){
    border:solid pink @border_width;
}

在使用的时候，可以传入一个border_width或者不传，
当不传的时候，border_width默认就是20px；

.test_border_deafult{
    .border_function_default();
}

Less编译的结果为：

.test_border_deafult{
    border:solid pink 20px;
}

当传入参数的时候，border_width就根据这个传入的值进行相应的改变

.test_border_deafult{
    .border_function_default(50px);
}

Less编译的结果为：

.test_border_deafult{
    border:solid pink 50px;
}