Czy LESS ma funkcję "rozszerzania"?

Question

SASS ma funkcję o nazwie @extend, która umożliwia selektorowi dziedziczenie właściwości innego selektora, ale bez kopiowania właściwości (takich jak mixins).

Czy funkcja MNIEJ ma również tę funkcję?

Answer 1

Tak, less.js wprowadził extend w v1.4.0.

:extend() 

Zamiast realizacji w temperaturze reguły (@extend) składni przez SASS i rysika, mniej realizowane składni pseudo klasy, który zapewnia realizacja MNIEJ na elastyczność być stosowane bezpośrednio do przełącznika sam lub wewnątrz oświadczenie. Tak więc oba te będą działać:

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

lub

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

Dodatkowo można użyć dyrektywy all przedłużyć "zagnieżdżone" klas, a także:

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

i można dodać rozdzielana przecinkami lista klas, które chcesz rozszerzyć:

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

Przedłużając zagnieżdżone selektorów należy zauważyć różnice:

zagnieżdżone Selektory .selector1 i selector2:

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

Teraz .selector3:extend(.selector1 .selector2){}; wyjścia:

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

, .selector3:extend(.selector1 all){}; wyjścia:

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

, .selector3:extend(.selector2){}; wyjścia

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

i wreszcie .selector3:extend(.selector2 all){};:

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