Share
Die wahre Kraft eines CSS-Präprozessors zu nutzen, ist ein Abenteuer. Es gibt unzählige Sprachen, Syntaxen und Funktionen, die alle einsatzbereit sind jetzt sofort.
In diesem Artikel werden die verschiedenen Funktionen und Vorteile der Verwendung von drei verschiedenen Präprozessoren (Sass, LESS und Stylus) behandelt.
Präprozessoren erzeugen CSS, das in allen Browsern funktioniert.
CSS3-Präprozessoren sind Sprachen, die ausschließlich zu dem Zweck verfasst wurden, coole, einfallsreiche Funktionen zu CSS hinzuzufügen, ohne die Browserkompatibilität zu beeinträchtigen. Sie tun dies, indem sie den Code, den wir schreiben, in normales CSS kompilieren, das in jedem Browser bis in die Steinzeit verwendet werden kann. Es gibt Tausende von Funktionen, die Präprozessor an den Tisch bringen, und in diesem Artikel werden wir einige der publizierten und einige der nicht so publizierten Funktionen behandeln. Lass uns anfangen.
Der wichtigste Teil beim Schreiben von Code in einem CSS-Präprozessor ist das Verstehen der Syntax. Glücklicherweise ist (oder kann) die Syntax für alle drei Präprozessoren mit regulärem CSS identisch.
Sass und LESS verwenden beide die Standard-CSS-Syntax. Dies macht es extrem einfach, eine vorhandene CSS-Datei in einen der beiden Präprozessoren zu konvertieren. Sass benutzt die .scss Dateierweiterung und LESS verwendet die .Weniger Erweiterung. Die grundlegende Sass- oder LESS-Datei kann wie folgt eingerichtet werden:
/ * style.scss oder style.less * / h1 color: # 0982C1;
Wie Sie vielleicht schon bemerkt haben, handelt es sich hierbei lediglich um ein reguläres CSS, das sich sowohl in Sass als auch in LESS perfekt zusammenstellt.
Es ist wichtig zu wissen, dass Sass auch eine ältere Syntax hat, die Semikolons und geschweifte Klammern weglässt. Obwohl dies immer noch in der Nähe ist, ist es das auch alt und wir werden es nach diesem Beispiel nicht mehr verwenden. Die Syntax verwendet die .sass Dateierweiterung und sieht so aus:
/ * style.sass * / h1 Farbe: # 0982c1
Die Syntax für Stylus ist viel ausführlicher. Verwendung der .styl Als Dateierweiterung akzeptiert der Stylus die Standard-CSS-Syntax. Es sind jedoch auch einige andere Variationen möglich, bei denen Klammern, Doppelpunkte und Semikolons optional sind. Zum Beispiel:
/ * style.styl * / h1 color: # 0982C1; / * Klammern nicht angeben * / h1 Farbe: # 0982C1; / * keine Doppelpunkte und Semikolons * / h1 Farbe # 0982C1
Die Verwendung verschiedener Variationen im selben Stylesheet ist ebenfalls gültig, daher werden die folgenden ohne Fehler kompiliert.
h1 color # 0982c1 h2-Schriftgröße: 1.2em
Variablen können im gesamten Stylesheet deklariert und verwendet werden. Sie können einen beliebigen Wert haben, bei dem es sich um einen CSS-Wert handelt (z. B. Farben, Zahlen [Einheiten] oder Text.). Sie können überall in unserem Stylesheet referenziert werden.
Sass-Variablen werden mit vorangestellt $ Symbol und Wert und Name werden wie bei einer CSS-Eigenschaft durch ein Semikolon getrennt.
$ mainColor: # 0982c1; $ siteWidth: 1024px; $ borderStyle: gepunktet; body color: $ mainColor; border: 1px $ borderStyle $ mainColor; Max-Breite: $ siteWidth;
LESS-Variablen sind genau die gleichen wie Sass-Variablen, nur dass den Variablennamen das vorangestellte vorangestellt wird @ Symbol.
@mainColor: # 0982c1; @siteWidth: 1024px; @borderStyle: gepunktet; body color: @mainColor; border: 1px @borderStyle @mainColor; Max-Breite: @SiteWidth;
Für Stiftvariablen müssen ihnen keine vorangestellten Werte hinzugefügt werden $ Symbol. Das abschließende Semikolon ist wie immer nicht erforderlich, aber ein Gleichheitszeichen zwischen Wert und Variable ist vorhanden. Zu beachten ist, dass Stylus (0.22.4) kompiliert wird, wenn wir das voranstellen @ Symbol auf einen Variablennamen, wendet den Wert jedoch nicht an, wenn darauf verwiesen wird. Mit anderen Worten, mach das nicht.
mainColor = # 0982c1 siteWidth = 1024px $ borderStyle = gepunktete Körperfarbe mainColor-Rahmen 1px $ borderStyle mainColor max-width siteWidth
Jede der oben genannten Dateien wird in das gleiche CSS übersetzt. Sie können Ihre Vorstellungskraft nutzen, um zu sehen, wie nützlich Variablen sein können. Wir müssen nicht mehr eine Farbe ändern und müssen sie zwanzigmal erneut eingeben, oder möchten die Breite unserer Website ändern und müssen herumgraben, um sie zu finden. Hier ist das CSS nach der Kompilierung:
body color: # 0982c1; Rahmen: 1px gepunktet # 0982c1; Max-Breite: 1024px;
Wenn in unserem CSS mehrere Elemente mit demselben übergeordneten Element referenziert werden müssen, kann es umständlich sein, das übergeordnete Element immer wieder zu schreiben.
Abschnitt Marge: 10px; Abschnitt nav height: 25px; Abschnitt nav a color: # 0982C1; section nav a: hover text-decoration: underline;
Stattdessen können wir mit einem Präprozessor die untergeordneten Selektoren in die Klammern des übergeordneten Elements schreiben. Auch die & Symbol verweist auf den übergeordneten Selektor.
Alle drei Präprozessoren haben die gleiche Syntax für die Verschachtelung von Selektoren.
Abschnitt Marge: 10px; nav Höhe: 25px; a color: # 0982C1; &: hover text-decoration: underline;
Dies ist das kompilierte CSS aus dem obigen Code. Es ist genau das gleiche wie zu Beginn - wie bequem!
Abschnitt Marge: 10px; Abschnitt nav height: 25px; Abschnitt nav a color: # 0982C1; section nav a: hover text-decoration: underline;
Mixins sind Funktionen, die die Wiederverwendung von Eigenschaften in unserem Stylesheet ermöglichen. Anstatt mehrmals durch unser Stylesheet zu gehen und eine Eigenschaft zu ändern, können wir sie jetzt einfach in unserem Mixin ändern. Dies kann sehr nützlich sein, um Elemente und Herstellerpräfixe gezielt zu gestalten. Wenn Mixins aus einem CSS-Selektor aufgerufen werden, werden die Mixin-Argumente erkannt und die Stile im Mixin werden auf den Selektor angewendet.
/ * Sass-Mixin-Fehler mit (optionalem) Argument $ borderWidth, der standardmäßig 2px ist, falls nicht angegeben * / @mixin-Fehler ($ borderWidth: 2px) border: $ borderWidth solid # F00; Farbe: # F00; .generic-error padding: 20px; Marge: 4px; @ include Fehler (); / * Wendet Styles vom Mixin-Fehler an * / .login-error left: 12px; Position: absolut; oben: 20px; @ include Fehler (5px); / * Wendet Stile aus einem Mixin-Fehler mit dem Argument $ borderWidth an, das 5px * / entspricht.
/ * LESS Mixin-Fehler mit (optionalem) Argument @borderWidth, der standardmäßig auf 2px gesetzt ist, falls nicht angegeben * / .error (@borderWidth: 2px) border: @borderWidth solid # F00; Farbe: # F00; .generic-error padding: 20px; Marge: 4px; .Error(); / * Wendet Styles vom Mixin-Fehler an * / .login-error left: 12px; Position: absolut; oben: 20px; Fehler (5px); / * Wendet Stile aus einem Mixin-Fehler mit dem Argument @borderWidth an, das 5px * / entspricht.
/ * Stylus-Mixin-Fehler mit (optionalem) Argument borderWidth, der standardmäßig auf 2px gesetzt ist, falls nicht angegeben * / error (borderWidth = 2px) border: borderWidth solid # F00; Farbe: # F00; .generic-error padding: 20px; Marge: 4px; Error(); / * Wendet Styles vom Mixin-Fehler an * / .login-error left: 12px; Position: absolut; oben: 20px; Fehler (5px); / * Wendet Stile aus einem Mixin-Fehler mit dem Argument borderWidth an, das 5px * / entspricht.
Alle Präprozessoren kompilieren nach demselben Code:
.generic-error padding: 20px; Marge: 4px; Rand: 2px fest # f00; Farbe: # f00; .login-error left: 12px; Position: absolut; oben: 20px; Rand: 5px fest # f00; Farbe: # f00;
Wenn Sie CSS auf altmodische Weise schreiben, können Sie den folgenden Code verwenden, um dieselben Stile auf mehrere Elemente gleichzeitig anzuwenden:
p, ul, ol / * Styles hier * /
Das funktioniert großartig, aber wenn wir die Elemente individuell weiter gestalten müssen, muss für jedes Element ein weiterer Selektor erstellt werden, der schnell unübersichtlich und schwieriger zu warten ist. Um dem entgegenzuwirken, kann Vererbung verwendet werden. Vererbung ist die Fähigkeit anderer CSS-Selektoren, die Eigenschaften eines anderen Selektors zu erben.
.Block Marge: 10px 5px; Polsterung: 2px; p @extend .block; / * Vererbung von Styles von '.block' * / border: 1px solid #EEE; ul, ol @extend .block; / * Stile von '.block' übernehmen * / color: # 333; Text-Transformation: Großbuchstaben;
.Block, p, ul, ol Marge: 10px 5px; Polsterung: 2px; p border: 1px fest #EEE; ul, ol color: # 333; Text-Transformation: Großbuchstaben;
LESS unterstützt nicht wirklich erbliche Stile wie Sass und Stylus. Anstatt mehrere Selektoren zu einem Satz von Eigenschaften hinzuzufügen, behandelt es Vererbung wie ein Mixin ohne Argumente und importiert die Stile in ihre eigenen Selektoren. Der Nachteil ist, dass die Eigenschaften in Ihrem kompilierten Stylesheet wiederholt werden. So würden Sie es einrichten:
.Block Marge: 10px 5px; Polsterung: 2px; p .block; / * Vererbung von Styles von '.block' * / border: 1px solid #EEE; ul, ol .block; / * Stile von '.block' übernehmen * / color: # 333; Text-Transformation: Großbuchstaben;
.Block Marge: 10px 5px; Polsterung: 2px; p Marge: 10px 5px; Polsterung: 2px; Grenze: 1px fest #EEE; ul, ol Marge: 10px 5px; Polsterung: 2px; Farbe: # 333; Text-Transformation: Großbuchstaben;
Wie Sie sehen können, sind die Stile aus .Block wurden in die Selektoren eingefügt, denen wir die Vererbung geben wollten. Es ist wichtig zu wissen, dass Priorität hier zum Thema werden kann. Seien Sie also vorsichtig.
In der CSS-Community ist das Importieren von CSS verpönt, da mehrere HTTP-Anforderungen erforderlich sind. Das Importieren mit einem Präprozessor funktioniert jedoch anders. Wenn Sie eine Datei aus einem der drei Präprozessoren importieren, wird dies wörtlich umfassen der Import während des Kompilierens, wobei nur eine Datei erstellt wird. Denken Sie daran, dass regelmäßig importiert wird .css Dateien werden mit der Standardeinstellung kompiliert @import "file.css"; Code. Mixins und Variablen können auch importiert und in Ihrem Stylesheet verwendet werden. Das Importieren macht das Erstellen separater Dateien für die Organisation sehr lohnend.
/ * file. type * / body background: #EEE;
@import "reset.css"; @import "Datei. Typ"; p Hintergrund: # 0982C1;
@import "reset.css"; body background: #EEE; p Hintergrund: # 0982C1;
Farbfunktionen sind in Funktionen eingebaut, die beim Kompilieren eine Farbe transformieren. Dies kann äußerst nützlich sein, um Farbverläufe, dunkle Schwebefarben und vieles mehr zu erstellen.
aufhellen ($ color, 10%); / * gibt eine Farbe zurück, die um 10% heller ist als $ color * / dunkler ($ color, 10%); / * gibt eine Farbe zurück, die 10% dunkler ist als $ color * / saturate ($ color, 10%); / * gibt eine um 10% gesättigte Farbe zurück als $ color * / desaturate ($ color, 10%); / * gibt eine Farbe zurück, die um 10% weniger gesättigt ist als $ color * / Graustufen ($ color); / * gibt Graustufen von $ color zurück * / Komplement ($ color); / * gibt die Komplementfarbe von $ color zurück * / invert ($ color); / * gibt die invertierte Farbe von $ color zurück * / mix ($ color1, $ color2, 50%); / * mische $ color1 mit $ color2 mit einem Gewicht von 50% * /
Dies ist nur eine kurze Liste der verfügbaren Farbfunktionen in Sass. Eine vollständige Liste der verfügbaren Sass-Farbfunktionen finden Sie in der Sass-Dokumentation.
Farbfunktionen können überall dort verwendet werden, wo eine Farbe gültiges CSS ist. Hier ist ein Beispiel:
$ color: # 0982C1; h1 Hintergrund: $ color; Rand: 3px dunkler ($ color, 50%);
aufhellen (@color, 10%); / * gibt eine Farbe zurück, die um 10% heller ist als @color * / dunkler (@color, 10%); / * gibt eine Farbe zurück, die um 10% dunkler ist als @color * / saturate (@color, 10%); / * gibt eine um 10% gesättigte Farbe zurück als @color * / desaturate (@color, 10%); / * gibt eine Farbe zurück, die um 10% weniger gesättigt ist als @color * / spin (@color, 10); / * gibt eine Farbe mit einem um 10 Grad größeren Farbton zurück als @color * / spin (@color, -10); / * gibt eine Farbe mit einem um 10 Grad geringeren Farbton zurück als @color * / mix (@ color1, @ color2); / * eine Mischung aus @ color1 und @ color2 zurückgeben * /
Eine Liste aller LESS-Funktionen finden Sie in der LESS-Dokumentation.
Hier ist ein Beispiel für die Verwendung einer Farbfunktion in LESS:
@color: # 0982C1; h1 Hintergrund: @farbe; Rand: 3px dunkler (@color, 50%);
aufhellen (Farbe, 10%); / * gibt eine Farbe zurück, die um 10% heller ist als 'color' * / dunkler (Farbe, 10%); / * gibt eine Farbe zurück, die um 10% dunkler ist als 'Farbe' * / gesättigt (Farbe, 10%); / * gibt eine Farbe zurück, die um 10% gesättigter ist als 'Farbe' * / desaturate (Farbe, 10%); / * gibt eine Farbe zurück, die um 10% weniger gesättigt ist als 'Farbe' * /
Eine vollständige Liste aller Stylus-Farbfunktionen finden Sie in der Stylus-Dokumentation.
Hier ein Beispiel mit den Farbfunktionen des Stylus:
color = # 0982C1 h1 Hintergrundfarbrand 3px einfarbig dunkler (Farbe, 50%)
Mathematik in CSS zu machen ist sehr nützlich und jetzt vollständig möglich. Es ist einfach und so wird es gemacht:
Körper Marge: (14px / 2); oben: 50px + 100px; rechts: 100px - 50px; links: 10 * 10;
Wir haben eine Menge der Funktionen und Neuerungen behandelt, die Vorverarbeiter tun können, aber wir haben nichts Praktisches oder Praktisches behandelt. Hier eine kurze Liste realer Anwendungen, bei denen die Verwendung eines Präprozessors eine Rettung darstellt.
Dies ist einer der Gründe, warum ein Preprozessor verwendet werden sollte, und das aus einem sehr guten Grund - es spart Zeit und Tränen. Das Erstellen eines Mixins zur Handhabung von Herstellerpräfixen ist einfach und erspart viel Wiederholung und mühsames Bearbeiten. So geht's:
@mixin border-radius ($ values) -webkit-border-radius: $ values; -moz-border-radius: $ values; Grenzradius: $ -Werte; div @umgrenzungsradius (10px);
.border-radius (@values) -webkit-border-radius: @values; -moz-border-radius: @values; Grenzradius: @ Werte; div . Randradius (10px);
Randradius (Werte) -webkit-Randradius: Werte; -moz-border-radius: Werte; Grenzradius: Werte; div border-radius (10px);
div -webkit-border-radius: 10px; -moz-border-radius: 10px; Grenzradius: 10px;
Fälschung von 3D-Text mit mehreren Text-Schatten ist eine clevere Idee. Das einzige Problem ist, dass das Ändern der Farbe danach schwierig und mühsam ist. Mithilfe von Mixins und Farbfunktionen können wir 3D-Text erstellen und die Farbe im laufenden Betrieb ändern!
@mixin text3d ($ color) color: $ color; Text-Schatten: 1px 1px 0px dunkler ($ color, 5%), 2px 2px 0px dunkler ($ color, 10%), 3px 3px 0px dunkler ($ color, 15%), 4px 4px 0px dunkler ($ color, 20% ), 4px 4px 2px # 000; h1 font-size: 32pt; @include text3d (# 0982c1);
.text3d (@color) color: @color; text-shadow: 1px 1px 0px dunkler (@color, 5%), 2px 2px 0px dunkler (@color, 10%), 3px 3px 0px dunkler (@color, 15%), 4px 4px 0px dunkler (@color, 20% ), 4px 4px 2px # 000; span font-size: 32pt; .text3d (# 0982c1);
text3d (Farbe) Farbe: Farbe Text-Schatten: 1px 1px 0px dunkler (Farbe, 5%), 2px 2px 0px dunkler (Farbe, 10%), 3px 3px 0px dunkler (Farbe, 15%), 4px 4px 0px dunkler (Farbe) , 20%), 4px 4px 2px # 000 Span Schriftgröße: 32pt Text3d (# 0982c1)
Ich entschied mich für den Stylus Text-Schatten in einer Zeile, weil ich die geschweiften Klammern weggelassen habe.
span font-size: 32pt; Farbe: # 0982c1; Text-Schatten: 1px 1px 0px # 097bb7, 2px 2px 0px # 0875ae, 3px 3px 0px # 086fa4, 4px 4px 0px # 07689a, 4px 4px 2px # 000;
Die Verwendung von Zahlenoperationen und Variablen für Spalten ist eine Idee, auf die ich gekommen bin, als ich zum ersten Mal mit CSS-Präprozessoren spielte. Durch das Deklarieren einer gewünschten Breite in einer Variablen können Sie diese leicht und ohne Nachdenken ändern. So wird's gemacht:
$ siteWidth: 1024px; $ gutterWidth: 20px; $ sidebarWidth: 300px; body margin: 0 auto; width: $ siteWidth; .content float: left; width: $ siteWidth - ($ sidebarWidth + $ gutterWidth); .sidebar float: left; Rand links: $ gutterWidth; width: $ sidebarWidth;
@siteWidth: 1024px; @gutterWidth: 20px; @sidebarWidth: 300px; body margin: 0 auto; Breite: @SiteWidth; .content float: left; width: @siteWidth - (@ sidebarWidth + @ gutterWidth); .sidebar float: left; Rand links: @gutterWidth; width: @sidebarWidth;
SiteWidth = 1024px; Rinnenbreite = 20px; SidebarWidth = 300px; body margin: 0 auto; Breite: SiteWidth; .content float: left; width: siteWidth - (sidebarWidth + rinnenbreite); .sidebar float: left; Rand links: Rinnenbreite; Breite: SeitenleisteBreite;
body margin: 0 auto; Breite: 1024px; .content float: left; Breite: 704px; .sidebar float: left; Rand links: 20px; Breite: 300px;
Bei der Verwendung eines CSS-Präprozessors gibt es einige Macken. Ich werde ein paar der lustigen besprechen, aber wenn Sie wirklich daran interessiert sind, sie alle zu finden, empfehle ich Ihnen, die Dokumentation zu durchforsten oder, besser noch, einen Präprozessor in Ihrer täglichen Codierung zu verwenden.
Wenn Sie CSS für eine anständige Zeit geschrieben haben, sind Sie sicher an einem Punkt angelangt, an dem Sie irgendwo einen Fehler hatten und ihn einfach nicht finden konnten. Wenn Sie wie ich sind, haben Sie wahrscheinlich den Nachmittag damit verbracht, Ihre Haare herauszuziehen und verschiedene Dinge zu kommentieren, um den Fehler zu finden.
CSS-Präprozessoren melden Fehler. Es ist einfach so einfach. Wenn mit Ihrem Code etwas nicht stimmt, erfahren Sie, wo und wann Sie Glück haben: warum. Sie können diesen Blogbeitrag lesen, wenn Sie wissen möchten, wie Fehler in den verschiedenen Präprozessoren gemeldet werden.
Beim Kompilieren mit einem CSS-Präprozessor werden alle doppelten Schrägstrichkommentare entfernt (z. //Kommentar) und ein Schrägstrich-Sternchen-Kommentar bleibt erhalten (z. /* Kommentar */). Verwenden Sie jedoch einen doppelten Schrägstrich für Kommentare, die Sie auf der nicht kompilierten Seite möchten, und einen Schrägstrich (Stern) für Kommentare, die nach der Kompilierung sichtbar sein sollen.
Nur eine Anmerkung: Wenn Sie minimierte kompilieren, werden alle Kommentare entfernt.
Jeder CSS-Präprozessor, den wir behandelt haben (Sass, LESS und Stylus), verfügt über eine eigene Methode, um dieselben Aufgaben zu erledigen, die es Entwicklern ermöglichen, nützliche, nicht unterstützte Funktionen zu verwenden, während die Browserkompatibilität und die Code-Sauberkeit erhalten bleiben.
Preprozessoren sind zwar keine Voraussetzung für die Entwicklung, können jedoch viel Zeit sparen und verfügen über sehr nützliche Funktionen.
Ich möchte Sie alle dazu ermutigen, so viele Präprozessoren wie möglich zu testen, damit Sie effektiv einen Favoriten auswählen können und wissen können, warum er den zahlreichen anderen vorgezogen wird. Wenn Sie noch nicht mit einem Präprozessor versucht haben, Ihr CSS zu schreiben, empfehle ich Ihnen dringend, es auszuprobieren.
Haben Sie eine Lieblings-CSS-Präprozessor-Funktion, die ich nicht erwähnt habe? Kann man etwas tun, was ein anderer nicht kann? Lass es uns in den Kommentaren wissen!
Ein besonderer Dank geht an Karissa Smith, eine super talentierte Freundin von mir, die das Vorschaubild für diesen Artikel erstellt hat.
Accentsconagua