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)初级能为大家有所帮助。