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.

Deaktivieren der automatischen Windows 10-Wartung

Eines der häufigsten Windows-Probleme ist, dass Ihr PC träge wird, nachdem Sie ihn eine Weile im Leerlauf gelassen haben . Wenn das der Fall ist, dann ist höchstwahrscheinlich die automatische Wartung verantwortlich zu machen.Wenn ein System für ungefähr 5 Minuten inaktiv ist und dies täglich tut, führt Windows das Wartungstool automatisch im Hintergrund aus. Das S

(Tech- und Design-Tipps)

Bitcoin Alternativen: 15 Kryptowährungen, die Sie kennen sollten

Bitcoin hat im Jahr 2017 ein enormes Wachstum zu verzeichnen, allerdings ist sein Preis fast auf 4, 5 Tsd. USD gestiegen, was weitere Investitionen aufgrund hoher Preise begrenzt. Und deshalb stehen altcoins wie Ethereum und Dash heute im Rampenlicht .Wenn Sie mich fragen, ist die Investition in Altcoins eine gute Strategie, da diese im Vergleich zu Bitcoin neu und niedrigwertig sind und somit eine größere Chance haben, im Laufe der Zeit zu wachsen .

(Tech- und Design-Tipps)