LES ha una funzione di "estensione"?

Question

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

È presente anche questa funzione?

Answer 1

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

:extend() 

Piuttosto che implementare la sintassi at-regola (@extend) utilizzato da SASS e stilo, MENO implementato la sintassi pseudo-classe, che dà attuazione della MENO la flessibilità essere applicata direttamente ad un selettore sola oppure all'interno una dichiarazione. Quindi entrambi questi funzioneranno:

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

o

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

Inoltre, è possibile utilizzare la direttiva all di estendere "annidati" classi così:

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

ed è possibile aggiungere un elenco separato da virgole di classi che desideri estendere:

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

Quando si estende selettori nidificate si dovrebbe notare le differenze:

selettori nidificati .selector1 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; 
}