跟我一起了解less（8）：Extend扩展

extend是less的一个伪类，所以要这么用 &:extend() {}。

一看单词就知道，这其实就是继承嘛，你没看错，这就是继承。

 

问题来了，less既然有mixin，为啥还需要extend呢？有人看到这话可能不太理解，那我就用例子解释一下

 

用法：官网上给了很多例子，总结起来就一句话，继承指定类内部的样式，但继承的类必须能找到并且它的内部要有样式，可以继承多个类。
.box-part1 {
    width:50px;
    height:50px;
    background:blueviolet;
}
.box-part1&:hover {
    transform: rotate(45deg);
}
.box-part2 {
    width:25px;
    height:25px;
    border:1px solid red;
}
.box-part3&:extend(.box-part1,.box-part1&:hover,.box-part2) { //可以继承多个，但伪类不能被继承
    transform: translateY(50px);
}
.box-part3&:hover&:extend(.box-part2) { //可以在伪类后面继承
    transform: translateY(50px) rotate(75deg);
}
.box-part4 {
    &:extend(.box-part1); //同伪类一样用法，可以写在里面
}

看着转换后的结果，继续上个话题，为什么要新增一个extend来代替mixin的嵌入功能。

这在转换的css结果不同，mixin转换后的css相当于新增一块相同的样式内容，而extend是在选择器的后面增加了一个你要引用的选择器名，所以extend相比要节省更多的资源。

如果一个大项目的less文件都用mixin来继承，那最终css的文件大小将成倍增长，所以extend是个不错的建议。

 

最后来说说extend的几个特性：

1、不能继承伪类，如上边的例子

2、extend必须放在所有选择器的最后，这是语法规定

3、要继承的类必须能找到，比如说 .box .class{} 和 .class .box {} ，如果我要继承.class它就会找不到

4、extend的圆括号中也可以用连续引用，比如说 .aaa > .bbb > .ccc 或者 .aaa .bbb > .ccc等

 

---

 

less这部分文章连载完了，我先来分享一下我的感受吧。

可能我更新的文章很多人都懂，也许我写的都是废话，但是这不也是一种学习的过程吗？当我做例子时，自己也会在编辑器中调试，很多的用法光看解释往往是无法深入的，但调试过之后会多了一种拨云见日的感觉。自己写的文章，自己的印象会更深刻一些，倘若什么时候忘记了，在翻看一下自己写的这些内容，马上就会找到改如何处理。

另外，于我而言，“知识”是很虚无缥缈的东西，你说记在脑袋里，但时间长了它也会从你脑袋里搬家，如果有一个地方能把学到的“知识”记录下来，那不仅是一种财富，而且是带着“满足感”的财富。

下一组我会更新scss系列内容，介绍另一种方式、也是目前最受欢迎的预处理css——scss。