LESS是否具有「擴展」功能？

Question

SASS有一個名爲@extend的功能，它允許選擇器繼承另一個選擇器的屬性，但不需要複製屬性（如mixins）。

LESS是否也有此功能？

Answer 1

是的，Less.js介紹extend在v1.4.0。

:extend() 

而不是執行由SASS和手寫筆使用的所述規則（@extend）語法，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; 
}