Hat WENIGER eine "Erweitern" -Funktion?

SASS verfügt über eine Funktion namens @extend, mit der ein Selektor die Eigenschaften eines anderen Selektors erben kann, ohne jedoch die Eigenschaften (wie Mixins) zu kopieren.

Hat WENIGER auch diese Funktion?

Ja, Less.js wurde extendin Version 1.4.0 eingeführt .

:extend()

Anstatt @extenddie von SASS und Stylus verwendete at-rule ( ) -Syntax zu implementieren, implementierte LESS die Pseudoklassensyntax, die der Implementierung von LESS die Flexibilität gibt, entweder direkt auf einen Selektor selbst oder innerhalb einer Anweisung angewendet zu werden. Beides wird also funktionieren:

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

oder

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

Darüber hinaus können Sie die allDirektive auch verwenden, um "verschachtelte" Klassen zu erweitern:

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

Und Sie können eine durch Kommas getrennte Liste von Klassen hinzufügen, die Sie erweitern möchten:

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

Wenn Sie verschachtelte Selektoren erweitern, sollten Sie die Unterschiede beachten:

verschachtelte Selektoren .selector1und selector2:

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

Jetzt .selector3:extend(.selector1 .selector2){};gibt es aus:

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

, .selector3:extend(.selector1 all){};Ausgänge:

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

, .selector3:extend(.selector2){};Ausgänge

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

und schließlich .selector3:extend(.selector2 all){};:

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

Einfache Möglichkeit, eine Funktion in Less Framework zu erweitern

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

Ausgabe

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

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