LESS是否有一个“扩展”功能？(Does LESS have an “extend” featur

SASS有一个称为特征@extend其允许选择器继承另一个选择器的性能，但不复制的属性（如混入）。

LESS是否有这个功能呢？

Answer 1:

是的，Less.js推出extend在V1.4.0 。

:extend()

而不是执行在规则（ @extend由SASS和铁笔中使用）的语法，LESS实现的伪类的语法，这给LESS的实现可以灵活地进行或者直接施加到选择器本身，或一个语句内。因此，这两种都可以工作：

.sidenav:extend(.nav) {...}

要么

.sidenav {
    &:extend(.nav);
    ...
}

此外，可以使用all指令延伸的“嵌套”类，以及：

.sidenav:extend(.nav all){};

您可以添加您想扩展一个类的逗号分隔列表：

.global-nav {
    &:extend(.navbar, .nav all, .navbar-fixed-top all, .navbar-inverse);
    height: 70px;
}

当扩展嵌套选择你应该注意到的差异：

嵌套选择.selector1和selector2 ：

.selector1 {
  property1: a;
   .selector2 {
    property2: b;
   }
}

现在.selector3:extend(.selector1 .selector2){}; 输出：

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector3 {
  property2: b;
}

， .selector3:extend(.selector1 all){}; 输出：

.selector1,
.selector3 {
  property1: a;
}
.selector1 .selector2,
.selector3 .selector2 {
  property2: b;
}

， .selector3:extend(.selector2){}; 输出

.selector1 {
  property1: a;
}
.selector1 .selector2 {
  property2: b;
}

最后.selector3:extend(.selector2 all){}; ：

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector1 .selector3 {
  property2: b;
}

Answer 2:

简单的方法来欠框架扩展功能

.sibling-1 {
    color: red
}
.sibling-2 {
    background-color: #fff;
    .sibling-1();
}

产量

.sibling-1 {
  color: red
}
.sibling-2 {
  background-color: #fff;
  color: red
}

请参阅https://codepen.io/sprushika/pen/MVZoGB/