3 neue LESS CSS Features, die Sie kennen sollten

Es ist eine Weile her seit unserer letzten Diskussion über Less CSS. Heute hat LESS CSS Version 1.5 erreicht, und es hat sich mit neuen Features weiterentwickelt, die es als CSS Pre-Prozessor leistungsfähiger machen.

Es gab eine Reihe neuer Ergänzungen darin, und in diesem Beitrag werden wir Sie durch 3 meiner neuen Lieblingsfunktionen führen, Externe Datei referenzieren, Erweitern, Eigenschaft zusammenführen, die uns helfen kann, besser CSS zu schreiben. Lass uns einen Blick darauf werfen.

Dateiimport

Betrachten wir zunächst, wie LESS CSS mit der @import Regel externe Dateien @import .

Manche Leute teilen ihr Stylesheet in mehrere Dateien auf, anstatt es in einen Topf zu legen. Dann importieren sie sie mit dem @import in ein anderes Stylesheet, so dass die Mixins (sowie die Variablen ) aus diesen Dateien in dieser anderen Datei wiederverwendet werden können.

 @import "external.less"; 

Das Problem ist, dass LESS alle Mixins aus diesen externen Dateien kompiliert, so dass wir mit mehreren Stilregeln enden würden, die dasselbe definieren.

Sehen Sie sich das folgende Beispiel an: Wir haben zwei LESS-Dateien namens style.less und external.less . Wir importieren external.less in style.less . Dann haben wir .square Mixin in external.less, um den Stil für quadratische Boxen zu definieren. Innerhalb des style.less verwenden wir das Mixin so.

 @import "extern"; .box {.square; } 

Dies führt zu folgendem Ergebnis in CSS. Die Style-Regeln von .square erzeugt - was nicht gut ist.

 .square {Breite: 100px; Höhe: 100px; Rand: 0 automatisch; Hintergrundfarbe: rot; } .box {Breite: 100px; Höhe: 100px; Rand: 0 automatisch; Hintergrundfarbe: rot; } 

In Version 1.5 wurde WENIGER eingeführt (reference), mit dem WEN angewiesen werden kann, die Importdatei nur als Referenz zu verwenden und den Inhalt nicht auszugeben.

Setzen Sie die (reference) Anweisung auf diese Weise:

 @ Import (Referenz) "extern"; 

Kompilieren Sie das LESS-Stylesheet und jetzt wird das .square nicht ausgegeben.

 .box {Breite: 100px; Höhe: 100px; Rand: 0 automatisch; Hintergrundfarbe: rot; } 

Erweitern

Extend- Methode ist pure Ehrfurcht. Technisch gruppiert es Selektoren, die dieselben Style-Regeln teilen, was zu saubereren und besser organisierten CSS führt . Wenn wir eine Website erstellen, könnten wir bei einigen Pointen einige Selektoren mit ähnlichen Stilregeln haben, wie unten:

 .box {Breite: 100px; Höhe: 100px; Rand: 0 automatisch; Rand: 1px durchgehend schwarz; Hintergrundfarbe: transparent; } .box2 {Breite: 100px; Höhe: 100px; Rand: 0 automatisch; Rand: 1px durchgehend schwarz; Hintergrundfarbe: rot; } 

Es ist überflüssig und folgt nicht den Best Practices, die vorschlagen, dieselben Stile zu kombinieren. Sass, in diesem Fall ist bekannt, mit seiner @extend Anweisung, um diesen Job zu tun, in weniger können wir eine ähnliche Sache mit &:extend() tun &:extend(), in der Version 1.4 eingeführt.

Angesichts des obigen Beispiels können wir Folgendes tun:

 @ Import (Referenz) "extern"; .box {&: erweitern (.square); Hintergrundfarbe: transparent; } .box2 {&: erweitern (.square); Hintergrundfarbe: rot; } 

Bei der Kompilierung zu regulärem CSS erzeugt der obige Code Folgendes:

 .square, .box, .box2 {Breite: 100px; Höhe: 100px; Rand: 0 automatisch; Rand: 1px durchgehend schwarz; } .box {Hintergrundfarbe: transparent; } .box2 {Hintergrundfarbe: rot; } 

Eigenschaft zusammenführen

Ein weiteres cooles neues Feature ist das Zusammenführen von Eigenschaften . Diese Funktion gilt für die CSS-Eigenschaft, die mehrere Werte wie Transformation, Übergang und Box-Schatten akzeptiert. Und wie der Name schon sagt, werden Werte zusammengeführt, die zu derselben Eigenschaft gehören. Schauen wir uns das folgende Beispiel an.

Wie Sie wahrscheinlich bereits wissen, akzeptiert die CSS3 Box Shadow-Eigenschaft mehrere Schattenwerte. Mit dieser Merging-Eigenschaft können Sie Schatteneffekte einfach erstellen und sie leichter verwalten.

Hier erstellen wir zwei Mixins .inner-shadow und .outer-shadow - ich denke die Namen sind selbsterklärend.

 .inner-shadow {box-shadow +: Einschub 10px 10px 5px #ccc; } .outer-shadow {box-shadow +: Einschub 10px 10px 5px #ccc; } 

Beachten Sie, dass wir am Ende des Namens der Eigenschaft ein + -Zeichen hinzufügen. Dieses Pluszeichen ist erforderlich, damit diese Funktion funktioniert. Dann können wir diese Mixins wie folgt verwenden:

 .box {.inner-Schatten; .Outer-Schatten; } .box2 {.inner-shadow; } .box3 {.outer-shadow; } 

Dieser Code wird uns das folgende Ergebnis geben.

 .box {box-shadow: Einschub 10px 10px 5px #ccc, 10px 10px 5px #ccc; } .box2 {box-shadow: Einschub 10px 10px 5px #ccc; } .box3 {Box-Schatten: 10px 10px 5px #ccc; } 

Letzter Gedanke

Diese 3 neuen Funktionen - Externe Datei referenzieren, Erweitern, Eigenschaften zusammenführen - motivierten mich, weniger zu verwenden. Mit ihnen können wir besser und überschaubarer CSS schreiben. Ich freue mich auf weitere coole neue Funktionen, die LESS in kommenden Versionen anbieten wird.

Flyte ist ein LightBulb, der schwebt, und es ist cool

Was fällt dir als erstes ein, wenn du das siehst? Lass mich helfen: Wie schwebt diese Glühbirne auf dieser Basis? Zweitens, was zum Teufel brennt diese Glühbirne?Zauber.Nun, die Magie der Magnetschwebebahn und der drahtlosen Energieübertragung, um genau zu sein. Diese LED-Glühbirne wird von einem Elektromagneten überschwemmt und leuchtet kabellos auf - schau ma, keine Batterie oder Stromkabel.Dies

(Tech- und Design-Tipps)

Entwickler: Debuggen Sie DOM-Elemente auf Ihrer Seite mit einer Codezeile

Wie oft haben Sie Schwierigkeiten, ein bestimmtes Problem zu finden, das Ihr CSS-Layout durcheinander bringt? Von fehlenden schließenden Tags bis zu falsch verschachtelten Geschwistern sind CSS-Probleme ein Dutzend. Und mit diesem CSS-Layout-Debugger wurde der Prozess um einiges einfacher .Diese eine Codezeile durchläuft das DOM und umreißt jedes Element mit einer anderen Farbe. A

(Tech- und Design-Tipps)