LESS详解之混合(Mixins)初级

墨蓝 2022-09-17 13:13 294阅读 0赞

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