Frage Hat LESS eine "erweitern" -Funktion?


SASS hat eine Funktion namens @extend Dadurch kann ein Selektor die Eigenschaften eines anderen Selektors übernehmen, ohne die Eigenschaften zu kopieren (wie Mixins).

Hat LESS auch diese Funktion?


75
2018-03-17 19:07


Ursprung


Antworten:


Ja, Less.js eingeführt extend im v1.4.0.

:extend()

Anstatt die Regel zu implementieren (@extend) Syntax, die von SASS und Stylus verwendet wird, hat LESS die Pseudoklassensyntax implementiert, die der LESS-Implementierung die Flexibilität gibt, entweder direkt auf einen Selektor selbst oder innerhalb einer Anweisung angewendet zu werden. Also werden beide funktionieren:

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

oder

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

Zusätzlich können Sie die all Direktive, um auch "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 bemerken:

geschachtelte Selektoren .selector1 und selector2:

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

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

.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 schlussendlich .selector3:extend(.selector2 all){};:

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

135
2018-03-17 19:07



Einfache Möglichkeit, eine Funktion im 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
}

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


0
2018-04-09 06:38