de.hideout-lastation.com
Paradies Für Designer Und Entwickler


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.

12 kostenlose Windows-Produktivitäts-Apps, die Sie herunterladen sollten

12 kostenlose Windows-Produktivitäts-Apps, die Sie herunterladen sollten

In den meisten Berufsfeldern müssen Sie einen Großteil Ihres Tages auf Ihrem PC verbringen, und so wirkt sich die Produktivität Ihres PCs unmittelbar auf Ihre persönliche Produktivität am Arbeitsplatz aus. Selbst wenn Sie kein typischer Büroangestellter sind, der keinen schnellen und effizienten Computer haben möchte, der Ihre täglichen Aufgaben erleichtert.Wenn Si

(Tech- und Design-Tipps)

Schaufenster von umweltfreundlichen (grünen) Website-Designs

Schaufenster von umweltfreundlichen (grünen) Website-Designs

Was ist die beste Inspirationsquelle? Die Natur! Wenn wir in dieser wunderschönen Mutter Erde leben, können wir vom Himmel, den Bäumen, den Gräsern und sogar dem Boden so viel Inspiration bekommen, dass dein Gehirn die Grenze ist! Wenn sie ihre Schönheit bezeugen, ist es für Webdesigner ein Kinderspiel, diese Elemente der Natur in das so genannte umweltfreundliche Webdesign zu integrieren.In di

(Tech- und Design-Tipps)