Referenz-Importe in LESS (sind irgendwie cool)

Sie wissen, wie man Dinge in CSS-Präprozessoren `extend` kann? (Wenn nicht, können Sie hier mehr darüber erfahren.) Sass kann das. LESS kann das. Stylus kann das. Obwohl es eine Funktion ist, mit der man vorsichtig sein sollte (siehe hier und hier), finde ich es manchmal ziemlich nützlich.

Bei einem kürzlichen CodePen Meetup in Chicago hörte ich Sam Allan einen kurzen Vortrag über die Fähigkeit von LESS, `(reference)`-Importe durchzuführen, was ich noch nie zuvor gesehen hatte.

Sie sehen so aus:

/* Normal import */
@import "colors-or-whatever.less";

/* Reference import */
@import (reference) "less-for-reference.less";

Ein normaler Import holt den Inhalt dieser Datei und fügt ihn in die Datei ein, die ihn anfordert. Super nützlich. Das Verketten von Dateien ist eine sehr wichtige Funktion von Präprozessoren. Ein `(reference)`-Import tut das nicht. Tatsächlich fügt er *überhaupt nichts* in die anfordernde Datei ein. Der Code in dieser Datei ist nun einfach verwendbar, entweder durch Aufrufen eines Mixins darin oder durch Erweitern eines Selektors darin.

Das ist ein ziemlich mächtiges Konzept. Es bedeutet, dass man eine ganze Bibliothek importieren und nur die Teile verwenden kann, die man möchte.

Wollten Sie jemals ein CSS-Framework oder eine Bibliothek verwenden, fanden es aber zu viel?

Das heißt, ein Haufen Code, von dem Sie nicht denken, dass Sie ihn jemals verwenden werden. Die Einbeziehung der gesamten Bibliothek scheint übertrieben, ganz zu schweigen davon, dass sie nicht ideal für die Leistung ist. Sie könnten ihn selbst auseinandernehmen, aber dann macht das irgendwie den Upgrade-Pfad kaputt.

Mit `(reference)`-Importen können Sie alles importieren, was Sie wollen, und dann nur die Teile davon erweitern, die Sie möchten. Es mag seltsam sein, aber Sie könnten eine Reihe von Bibliotheken importieren und nur Teile auswählen, um genau den benötigten Output zu erhalten.

Beispiel

Sagen wir, Sie mögen Pure CSS wirklich. Mattia Migliorini hat einen Port davon in LESS. Es ist voller guter Dinge, aber es sind 33 KB und vielleicht brauchen Sie nicht alles davon.

Darin befindet sich eine Klasse `.pure-button`, Pure CSS' Variante für Buttons. Wenn Sie sie verwenden möchten, könnten Sie das so tun:

@import (reference) "https://s3-us-west-2.amazonaws.com/s.cdpn.io/18728/pure.less";

.my-button {
  &:extend(.pure-button all);
}

Und hey, ich kann meine Version nennen, wie ich will. Und wenn die Bibliothek aktualisiert wird, aktualisiere ich sie einfach. Vorausgesetzt, die Namen haben sich nicht geändert, erhalte ich die Änderungen.

(Das `all`-Schlüsselwort, das Sie oben sehen, bedeutet "erweitere auch all seine verschachtelten Dinge", und das ist völlig optional, was eine weitere ziemlich coole Sache ist, die LESS-Erweiterungen können.)

Hier ist diese Demo:

Siehe den Pen GpjzOj von Chris Coyier (@chriscoyier) auf CodePen.

Mehr

Nochmal, Dank an Sam Allan, der mir das gezeigt hat. Er hat weitere Demos zu diesem Thema. Einige davon nennt er "Semantisches Neuzuordnen", weil er Selektoren verwendet, die seiner Meinung nach semantisch angemessener sind als die der ursprünglichen Bibliothek.

Siehe den Pen Semantisches Neuzuordnen — Framework Centipede Beispiel von dehuszar (@dehuszar) auf CodePen.