2.3、混合(Mixins)

最新推荐文章于 2024-10-16 11:23:07 发布

希望大佬文章可以白嫖

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量184

点赞数

分类专栏： less 文章标签：前端 less

本文链接：https://blog.csdn.net/shiyibushiwei/article/details/125667142

版权

less 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

## 2.3、混合(Mixins)

在 Less 中，混合可以将一个定义好的 class A 轻松的引入到另一个 class B 中，从而简单实现 class B 继承 class A 中的所有属性。我们还可以带参数地调用，就像使用函数一样。

### 1.继承类名

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

@width:300px;
@height:300px;
.width{
    width: @width;
    border: 10px solid green;
}
#boder{
    border-radius: 50%;
}
.height{
    height: @height;
}
.love{
    .width;
    .height;
    #boder;
    background: red;
}

2.带参数混合

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

// 带参数的混入
.width(@width){
    width:@width
}
.height(@height){
    height:@height
}

.love{
    .width(300px);
    .height(300px);
    background: red;
}
.loveYou{
    .width(520px);
    .height(521px);
    background: pink; 
}

.lv(@width,@height,@color){
    width: @width;
    height: @height;
    background: @color;
}
.loveMe{
    .lv(300px,200px,red)
}

<body>
    <div class="love"></div>
    <div class="loveYou"></div>
    <div class="loveMe"></div>
</body>

3.隐藏属性继承

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

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

4.默认值混合

我们还可以给参数设置默认值。有了默认值，我们可以不用设置属性值也能被调用。

5.多参数混合

1、-多个参数可以使用分号或者逗号分隔，这里推荐使用分号分隔，因为逗号有两重含义：它既可以表示混合的参数，也可以表示一个参数中一组值的分隔符。
使用分号作为参数分隔符意味着可以将逗号分隔的一组值作为一个变量处理。换句话说，如果编译器在混合的定义或者是调用中找到至少一个分号，就会假设参数是使用分号分隔的，所有的逗号都属于参数中的一组值的分隔符。

2、 2 个参数，每个参数都含有通过逗号分隔的一组值的情况：.name(1, 2, 3 ;something, else)。

3、3 个参数，每个参数叧含一个数字的情况：.name(1, 2, 3)。使用一个象征性的分号可以创建一个叧含一个参数，但参数包含一组值的混合：.name(1, 2, 3;)。

3、逗号分隔的一组值参数的默认值：.name(@param1: red, blue;)。

使用同样的名字和同样数量的参数定义多个混合是合法的。在被调用时，LESS会应用到所有可以应用的混合上。

.mixin(@width) {
 width-1: @width;
}
.mixin(@width; @height:2em) {
 width-2: @width;
 height-2: @height;
}
mixin(@width; @height; @margin: 2em) {
 width-3: @width;
 height-3: @height;
 margin: @margin @margin @margin @margin;
}
h1 {
 .mixin(red);
}
div {
 .mixin(#000,3px);
}
span {
 .mixin(#fff,3px,5px);
}