07.less中的继承

发表于 | 分类于

less中的继承

​ less是预处理器，不是编程语言，然后可以用一些编程语言的特性，比如函数，变量，继承

​ 其中，less中的混合类似函数，其本质是复制粘贴，就是说在哪里调用混合，那么就将混合中的代码复制到那里去，如果有多处地方调用了混合，那么会出现大量冗余重复的代码，怎么办？这时候就需要继承了

​ 利用:extend(混合)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.center{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.father:extend(.center){
  width: 300px;
  height: 300px;
  background: red;
  //.center;
  .son:extend(.center){
    width: 200px;
    height: 200px;
    background: blue;
    //.center;
  }
}

输出的css，可以看到，继承是并集选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.center,
.father,
.father .son {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.father {
  width: 300px;
  height: 300px;
  background: red;
}
.father .son {
  width: 200px;
  height: 200px;
  background: blue;
}

less中的继承和less中混合的区别

  1. 使用时的语法格式不同
  2. 转换之后的结果不同(混合是直接拷贝, 继承是并集选择器)