LESS是否有“扩展”function？

SASS有一个名为@extend的特性，它允许select器inheritance另一个select器的属性，但不需要复制属性（如mixin）。

LESS是否也有这个function？

Answer 1

是的，Less.js在v1.4.0中引入了extend 。

 :extend() 

LESS不是实现SASS和Stylus使用的at-rule（ @extend ）语法，而是实现了伪类语法，这使得LESS的实现可以灵活地直接应用于select器本身，也可以在语句中使用。 所以这两个将工作：

 .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; } 

扩展嵌套select器时，您应该注意到不同之处：

嵌套select器.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; }