Does LESS have an extension function?

Question

SASS has a function called @extend that allows the selector to inherit the properties of another selector, but without copying the properties (e.g. mixins).

Does LESS have this feature?

Answer 1

Yes, Less.js introduced extend in v1.4.0 .

 :extend() 

Instead of implementing the at-rule ( @extend ) syntax used by SASS and Stylus, LESS implemented a pseudo- @extend syntax that gives the LESS implementation flexibility that can be applied either directly to the selector or inside the operator, so both of them will work:

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

or

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

Alternatively, you can use the all directive to extend nested classes:

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

And you can add a list of classes that you want to expand:

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

When expanding nested selectors, you should notice the differences:

nested selectors .selector1 and selector2 :

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

Now .selector3:extend(.selector1 .selector2){}; produces:

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

.selector3:extend(.selector1 all){}; outputs:

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

.selector3:extend(.selector2){}; exits

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

and finally .selector3:extend(.selector2 all){}; :

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