less中的继承

经过上一篇 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 中混合的区别

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

如有不正确之处，还请大佬指正🐤