less 技巧 css extend

:extend是一个伪类，使用它的选择器，将和它引用的选择器一起使用它引用的选择器的样式，如：

先定义一个扩展的选择器，我们就叫它 .a，然后定义一个选择器 .b（用来扩展），在 .a内使用 :extend 扩展，代码如下:

.a{
    &:extend(.b);  //这里的 & 为 父选择符，代表的 父选择符 .a 扩展 .b
    font-size: 12px;
}
.b{
    font-weight: bold;
}

输出：

.a {
  font-size: 12px;
}
.b,
.a {
  font-weight: bold;  //这里 a 扩展也引用了 b 的样式
}

注意：如果这里的 .b 内没有定义任何样式，那么编译后的css中， 不会有 .b 的任何输出，相应的 .a 也不会扩展到任何样式

1.  :extend 语法

:extend()可以附加到选择器后面，也可以放到样式规则中，它看起来就像是一个选择器的伪类，在使用的时候我们可以选择性的加上 关键字 all

语法示例：

.a:extend(.b){}   //方法一：附加到选择器后
.a{
    &:extend(.b)    // 方法二：写在样式规则中
}

3.  :extend()在样式规则中使用

把 :extend() 放到多个选择器共用的样式规则集中，是把样式扩展到每个选择器的最佳选择。

下面来个对比：

直接把: extend() 放到样式规则中，

.a,
.c,
.d{
    &:extend(.b);
}
.b{
    font-size: 12rem;
}

输出：

.b,
.a,
.c,
.d {
  font-size: 12rem;
}

如果把 :extend 放在选择器后，那么需要单独对 .a , .c , .d单独处理，会增加代码量，后期维护也很繁琐

.a:extend(.b){}
.c:extend(.b){}
.d:extend(.b){}

4. 扩展 嵌套选择器

将:extend() 直接放在选择器后，可以扩展嵌套选择器样式规则，示例：

.my-table{
   .my-tr{
        font-size: 50px;
    }
}

.mt-other-table:extend(.my-table .my-tr){}