less 混合方式一一举例

less的混合

混合方式列举（自己命的）：

• 1.普通混合
• 2.不保留公共部分到css混合
• 3.带参数混合
• 4.带参数且有默认值混合
• 5.命名参数混合
• 6.匹配模式混合
• 7.匹配模式及不保留公共部分混合

1.普通混合

less转成css时公共部分还会保留。

less

.gonggong{
 width: 50px;
 height: 50px;
}
.box1{
 background: red;
 .gonggong;
}
.box2{
 background: yellow;
 .gonggong;
}

css

.gonggong {
  width: 50px;
  height: 50px;
}
.box1 {
  background: red;
  width: 50px;
  height: 50px;
}
.box2 {
  background: yellow;
  width: 50px;
  height: 50px;
}

2.不保留公共部分到css混合

less转成css时公共部分不保留。

less

.gonggong（）{
 width: 50px;
 height: 50px;
}
.box1{
 background: red;
 .gonggong;
}
.box2{
 background: yellow;
 .gonggong;
}

css

.box1 {
  background: red;
  width: 50px;
  height: 50px;
}
.box2 {
  background: yellow;
  width: 50px;
  height: 50px;
}

3.带参数（MIXIN）混合

编写less时方便更改样式

less

.gonggong(@w,@h){
 width: @w;
 height: @h;
}
.box1{
 background: red;
 .gonggong(30px,50px);
}
.box2{
 background: yellow;
 .gonggong(20px,60px);
}

css

.box1 {
  background: red;
  width: 30px;
  height: 50px;
}
.box2 {
  background: yellow;
  width: 20px;
  height: 60px;
}

4.带参数且有默认值混合

less

.gonggong(@w:10px,@h:10px){
 width: @w;
 height: @h;
}
.box1{
 background: red;
 .gonggong();
}
.box2{
 background: yellow;
 .gonggong(20px,60px);
}

css

.box1 {
  background: red;
  width: 10px;
  height: 10px;
}
.box2 {
  background: yellow;
  width: 20px;
  height: 60px;
}

5.命名参数混合

这样可以只修改一个值，不用写全部参数

less

.gonggong(@w:10px,@h:10px){
 width: @w;
 height: @h;
}
.box1{
 background: red;
 .gonggong(@h:99px);
}
.box2{
 background: yellow;
 .gonggong(20px,60px);
}

css

.box1 {
  background: red;
  width: 10px;
  height: 99px;
}
.box2 {
  background: yellow;
  width: 20px;
  height: 60px;
}

6.匹配模式混合

方便使用公共部分样式

less

.gonggong(){
 padding: 0 auto;
 border:solid;
}
.gonggong(R,@w:10px,@h:10px){
 background: red;
 width: @w;
 height: @h;
}
.gonggong(Y,@w:10px,@h:10px){
 background: yellow;
 width: @w;
 height: @h;
}

.box1{
 .gonggong;
 .gonggong(R);
}
.box2{
 .gonggong;
 .gonggong(Y);
}

css

.box1 {
  padding: 0 auto;
  border: solid;
  background: red;
  width: 10px;
  height: 10px;
}
.box2 {
  padding: 0 auto;
  border: solid;
  background: yellow;
  width: 10px;
  height: 10px;
}

7.匹配模式及相同命名自动匹配

less更方便快捷

less

.gonggong(R,@w:10px,@h:10px){
 background: red;

 width: @w;
 height: @h;
}
.gonggong(Y,@w:10px,@h:10px){
 background: yellow;
 width: @w;
 height: @h;
}
.gonggong(@_){
 padding: 0 auto;
 border:solid;
}
.box1{
 .gonggong(R);
}
.box2{
 .gonggong(Y);
}

css

.box1 {
  background: red;
  width: 10px;
  height: 10px;
  padding: 0 auto;
  border: solid;
}
.box2 {
  background: yellow;
  width: 10px;
  height: 10px;
  padding: 0 auto;
  border: solid;
}