MENO ha una funzione di “estensione”?

SASS ha una funzione chiamata @extend che consente a un selettore di ereditare le proprietà di un altro selettore, ma senza copiare le proprietà (come i mixin).

MENO ha anche questa caratteristica?

Sì, Less.js ha introdotto extend nella v1.4.0 .

 :extend() 

Piuttosto che implementare la syntax at-rule ( @extend ) usata da SASS e Stylus, LESS ha implementato la syntax pseudo-class, che dà all’implementazione di LESS la flessibilità necessaria per essere applicata direttamente a un selettore stesso o all’interno di un’istruzione. Quindi entrambi funzioneranno:

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

o

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

Inoltre, puoi utilizzare la direttiva all per estendere anche le classi “nidificate”:

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

E puoi aggiungere un elenco di classi separate da virgole che desideri estendere:

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

Quando estendi i selettori annidati dovresti notare le differenze:

selettori annidati. selettore1 e selector2 :

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

Ora .selector3:extend(.selector1 .selector2){}; uscite:

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

, .selector3:extend(.selector1 all){}; uscite:

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

, .selector3:extend(.selector2){}; uscite

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

e infine .selector3:extend(.selector2 all){}; :

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

Un modo semplice per estendere una funzione in meno framework

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

Produzione

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

Consulta https://codepen.io/sprushika/pen/MVZoGB/