LESS详解之混合(Mixins)初级

　　在LESS中，有很多方式都可以称作混合。比如继承已有的样式，调用有参数的类名等。在LESS详解之混合都会为大家一一介绍的。

　　继承类名

　　在 LESS 中，可以定义一些通用的属性集为一个 class，然后在另一个 class 中去调用这些属性。如果我们现在需要在其他 class 中引入那些通用的属性集，那么我们只需要在任何 class 中调用就可以了。任何 CSS class, id 属性集都可以以同样的方式引入。小例子如下

　　LESS代码

.width {width:1232px;}#height {height:2980px;}.long {.width;.meng {#height;.width;}}

　　编译后的CSS代码

.width {  width: 1232px;}#height {  height: 2980px;}.long {  width: 1232px;}.long .meng {  height: 2980px;  width: 1232px;}

　　带参数混合

　　在 LESS 中，你还可以像函数一样定义一个带参数的属性集合，然后在其他选择器中像调用它。小例子如下

　　LESS代码

.width (@width) {width:@width;}#height (@height) {height:@height;}.long {.width(20px);.meng {#height(30em);.width(50%);}}

　　编译后的CSS代码

.long {  width: 20px;}.long .meng {  height: 30em;  width: 50%;}

　　隐藏属性继承

　　你也可以定义不带参数属性集合，如果你想隐藏这个属性集合，不让它暴露到 CSS 中去，但是你还想在其他的属性集合中引用，你会发现这个方法非常的好用。小例子如下

　　LESS代码

.width () {width:1234px;}#height () {height:5678px;}.long {.width();.meng {#height();.width();}}

　　编译后的CSS代码

.long {  width: 1234px;}.long .meng {  height: 5678px;  width: 1234px;}

　　默认值混合

　　我们还可以像这样给参数设置默认值。有了默认值，我们可以不用设置属性值也能被调用。小例子如下

　　LESS代码

.width (@width : 2345px) {width:@width;}#height (@height : 6789px) {height:@height;}.long {.width();#height(753px);.meng {#height();.width(951px);}}

　　编译后的CSS代码

.long {  width: 2345px;  height: 753px;}.long .meng {  height: 6789px;  width: 951px;}

　　LESS详解之混合(Mixins)初级主要为大家介绍了一些LESS中有关混合(Mixins)的初级用法。只有掌握好了LESS混合中初级用法才更好的掌握一些比较高级的用法。希望LESS详解之混合(Mixins)初级能为大家有所帮助。