Hat WENIGER eine "Erweitern" -Funktion?

93

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?

css sass less extend jonschlinkert
quelle
Zur Verdeutlichung stellen die anderen Fragenreferenzen NICHT dasselbe. Diese Frage ist einfach: "Hat WENIGER eine Erweiterungsfunktion?". Die andere Frage ist, etwas zu fragen, das viel mehr Gedanken über Stylingentscheidungen erfordert.
Jonschlinkert
... um meinen letzten Kommentar zu ergänzen, enthält die andere Frage das "Coding-Style" -Tag, das meinen Standpunkt weiter unterstützt.
Jonschlinkert

Antworten:

156

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;
}
jonschlinkert
quelle
15
"Die Syntax von LESS ist dem herkömmlichen CSS" getreuer "als die @extendvon SASS und Stylus implementierte at-rule ( ) -Syntax, die normalerweise für die Übermittlung von Anweisungen oder Anweisungen an den CSS-Parser im Browser reserviert ist." <- was zum Teufel soll das heißen? Gerüche wie Marketing sprechen.
Cimmanon
1
Lassen Sie uns diese Diskussion im Chat fortsetzen
Steveax
2
@cimmanon Ich denke du hast recht, ich wollte nicht, dass es so klingt. Aber es gibt viele Kontroversen über die Syntax von Less, anscheinend, weil die Leute erwartet haben, dass Less dieselbe Syntax wie SASS verwendet. In CSS werden Pseuso-Selektoren für Mustervergleichsregeln verwendet, um zu bestimmen, welche Stilregeln für Elemente im Dokumentbaum gelten, während at-Regeln für "übergeordnete" Anweisungen verwendet werden (wie bereits erwähnt). Vielleicht sollte ich die Antwort bearbeiten, um dieses Detail bereitzustellen? Oder ist das eine andere Frage: "Warum hat WENIGER die Pseudo-Selektor-Syntax gewählt?"
Jonschlinkert
4
Sie sollten wirklich die weniger Dokumentation online aktualisieren, ich kann nichts über sehen: verlängern () und es wäre gut gewesen, früher zu wissen
Joshua Bambrick
2
Die Dokumentation wird wie der Code von der Community gepflegt. Diese Art von Vorschlägen wäre großartig für das eigentliche Repo, und Pull-Anfragen sind immer willkommen ;-)
Jonschlinkert
6

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/

Spushika Mulakala
quelle