Czy LESS ma funkcję „rozszerzania”?

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

Czy LESS ma również tę funkcję?

Tak, Less.js wprowadzony extendw wersji 1.4.0 .

:extend()

Zamiast implementować @extendskładnię at-rule ( ) używaną przez SASS i Stylus, LESS zaimplementował składnię pseudoklasową, która daje implementacji LESS elastyczność do zastosowania bezpośrednio do samego selektora lub wewnątrz instrukcji. Więc oba z nich będą działać:

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

lub

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

Ponadto możesz użyć alldyrektywy, aby rozszerzyć również „zagnieżdżone” klasy:

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

Możesz dodać listę klas oddzielonych przecinkami, które chcesz rozszerzyć:

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

Przy rozszerzaniu zagnieżdżonych selektorów należy zauważyć różnice:

zagnieżdżone selektory .selector1i selector2:

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

Teraz .selector3:extend(.selector1 .selector2){};wyświetla:

.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;
}

Łatwy sposób na rozszerzenie funkcji w Less frameworku

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

Wynik

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

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