LESS是否具有“扩展”功能？

LESS是否具有“扩展”功能？

是的，Less.js推出

extend

的V1.4.0。

:extend()

@extend

LESS没有实现SASS和Stylus使用的at-
rule（）语法，而是实现了伪类语法，这为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;}