经过上一篇 less中的层级结构 的讲解之后，本章节开展的内容为 less 中的继承，还是一样的老套路来引出 less 中的继承，先来看一段代码如下
* {
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.son {
width: 200px;
height: 200px;
background: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
如下的代码当中有一段居中的代码是重复的，在之前我们是如何解决这个问题的，是不是使用 混合，我们是直接将重复的代码抽离到一个单独的类当中，然后在需要使用的地方调用一下这个类即可，如下
* {
margin: 0;
padding: 0;
}
.center() {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.father {
width: 300px;
height: 300px;
background: red;
.center();
.son {
width: 200px;
height: 200px;
background: blue;
.center();
}
}
如上的代码虽然在 less 当中看上去没有重复代码了，但是在转换之后的文件当中，还是存在重复代码，内容如下
* {
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.father .son {
width: 200px;
height: 200px;
background: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
如果你想实现在 less 只有一份，在转换之后的文件当中也只有一份这个时候你就可以使用 less 中的继承，使用方式如下
* {
margin: 0;
padding: 0;
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.father:extend(.center) {
width: 300px;
height: 300px;
background: red;
.son:extend(.center) {
width: 200px;
height: 200px;
background: blue;
}
}
来看看转换之后的代码
less 中的继承和 less 中混合的区别
- 使用时的语法格式不同
- 转换之后的结果不同 (混合是直接拷贝，继承是
并集选择器)
