Einführung in Sass für neue WordPress-Theme-Designer

Als neuer WordPress-Theme-Designer würden Sie schnell die Herausforderungen kennenlernen, lange CSS-Dateien zu verwalten, während sie organisiert, skalierbar und lesbar bleiben. Sie erfahren außerdem, dass viele Designer und Front-End-Entwickler die Verwendung einer CSS-Präprozessorsprache wie Sass oder LESS empfehlen. Aber was sind diese Dinge? und wie fängst du mit ihnen an? Dieser Artikel ist eine Einführung in Sass für neue WordPress-Theme-Designer. Wir werden Ihnen sagen, was ein CSS-Präprozessor ist, warum Sie ihn benötigen und wie er installiert und sofort verwendet werden kann.

Was ist Sass??

Das von uns verwendete CSS wurde als einfach zu verwendende Stylesheet-Sprache entwickelt. Das Web hat sich jedoch weiterentwickelt, und die Designer müssen eine Stylesheet-Sprache haben, mit der sie mit weniger Aufwand und Zeit mehr erreichen können. Mit CSS-Präprozessorsprachen wie Sass können Sie Funktionen verwenden, die derzeit nicht im CSS verfügbar sind, z. B. Variablen, grundlegende mathematische Operatoren, Verschachtelung, Mixins usw.

Es ist sehr ähnlich wie PHP, eine Präprozessor-Sprache, die ein Skript auf dem Server ausführt und eine HTML-Ausgabe generiert. In ähnlicher Weise verarbeitet Sass .scss-Dateien, um CSS-Dateien zu generieren, die von Browsern verwendet werden können.

Seit Version 3.8 wurden WordPress-Verwaltungsbereichstile portiert, um Sass für die Entwicklung zu nutzen. Es gibt viele WordPress-Themenshops und Entwickler, die Sass bereits einsetzen, um ihren Entwicklungsprozess zu beschleunigen.

Erste Schritte mit Sass für die WordPress-Theme-Entwicklung

Die meisten Design-Designer verwenden eine lokale Entwicklungsumgebung, um an ihren Designs zu arbeiten, bevor sie in einer Staging-Umgebung oder einem Live-Server bereitgestellt werden. Da Sass eine Präprozessor-Sprache ist, müssen Sie sie in Ihrer lokalen Entwicklungsumgebung installieren.

Zuerst müssen Sie Sass installieren. Es kann als Befehlszeilentool verwendet werden, aber es gibt auch einige nette GUI-Apps für Sass. Wir empfehlen die Verwendung von Koala, einer kostenlosen OpenSource-App, die für Mac, Windows und Linux verfügbar ist.

In diesem Artikel müssen Sie ein leeres Design erstellen. Erstellen Sie einfach einen neuen Ordner in / wp-content / themes /. Sie können es "Mytheme" oder irgendetwas anderes nennen, das Sie wollen. Erstellen Sie in Ihrem leeren Designordner einen anderen Ordner und nennen Sie ihn Stylesheets.

Im Stylesheets-Ordner müssen Sie ein erstellen style.scss Datei mit einem Texteditor wie Notepad.

Nun müssen Sie Koala öffnen und auf das Plus-Symbol klicken, um ein neues Projekt hinzuzufügen. Suchen Sie als Nächstes Ihr Designverzeichnis und fügen Sie es als Projekt hinzu. Sie werden feststellen, dass Koala die Sass-Datei automatisch in Ihrem Stylesheets-Verzeichnis findet und anzeigt.

Klicken Sie mit der rechten Maustaste auf Ihre Sass-Datei und wählen Sie aus Ausgabepfad einstellen Möglichkeit. Wählen Sie nun den Stamm Ihres Designverzeichnisses aus, Beispiel, / wp-content / themes / mytheme / und drücken Sie die Eingabetaste. Koala generiert jetzt eine CSS-Ausgabedatei in Ihrem Designverzeichnis. Um dies zu testen, müssen Sie Ihre Sass-Datei öffnen style.scss in einem Texteditor wie Editor und fügen Sie diesen Code hinzu:

 $ fonts: arial, verdana, serifenlos; body font-family: $ fonts;  

Jetzt müssen Sie Ihre Änderungen speichern und zu Koala zurückkehren. Klicken Sie mit der rechten Maustaste auf Ihre Sass-Datei, und die Seitenleiste wird auf der rechten Seite angezeigt. Um Ihre Sass-Datei zu kompilieren, klicken Sie einfach auf 'Kompilieren' Taste. Sie können die Ergebnisse sehen, indem Sie das öffnen style.css Datei in Ihrem Design-Verzeichnis, und das verarbeitete CSS wird folgendermaßen aussehen:

 body font-family: arial, verdana, serifenlos;  

Beachten Sie, dass wir eine Variable definiert haben $ Schriftarten in unserer Sass-Datei. Wann immer wir eine Schriftfamilie hinzufügen müssen, müssen wir nicht die Namen aller Schriftarten erneut eingeben. Wir können es einfach verwenden $ Schriftarten.

Was andere Supermächte Sass für CSS bietet?

Sass ist unglaublich leistungsstark, abwärtskompatibel und sehr einfach zu erlernen. Wie bereits erwähnt, können Sie Variablen erstellen, verschachteln, mixins, importieren, partielle, mathematische und logische Operatoren usw. Nun werden wir Ihnen einige Beispiele zeigen, die Sie in Ihrem WordPress-Theme ausprobieren können.

Mehrere Stylesheets verwalten

Ein häufiges Problem, dem Sie als WordPress-Design-Designer begegnen werden, sind große Stylesheets mit vielen Abschnitten. Sie werden wahrscheinlich viel rauf und runter scrollen, um Probleme zu beheben, während Sie an Ihrem Thema arbeiten. Mit Sass können Sie mehrere Dateien in Ihr Stylesheet importieren und eine einzige CSS-Datei für Ihr Design ausgeben.

Was ist mit CSS @import??

Das Problem bei der Verwendung von @import in Ihrer CSS-Datei besteht darin, dass Ihre CSS-Datei jedes Mal, wenn Sie einen @import hinzufügen, eine weitere HTTP-Anforderung an den Server stellt. Dies wirkt sich auf Ihre Seitenladezeit aus, die für Ihr Projekt nicht gut ist. Wenn Sie dagegen @import in Sass verwenden, werden die Dateien in Ihre Sass-Datei eingeschlossen und in einer einzigen CSS-Datei für die Browser bereitgestellt.

Um zu lernen, wie Sie @import in Sass verwenden, müssen Sie zuerst ein reset.scss Datei im Stylesheets-Verzeichnis Ihres Themes und fügen Sie diesen Code ein.

 / * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Lizenz: none (public domain) * / html, body, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronym, adresse, groß, zitieren, code, del, dfn, em, img, ins, kbd, q, s, samp, klein, streik, stark, sub, sup, tt, var, b, u, ich, zentrum, dl, dt, dd, ol, ul, li, fieldset, formular, beschriftung, legende, tabelle, titel, tfoot, tread, th, td, artikel, beiseite, leinwand, details, einbetten, figur, figcaption, footer, header, hGruppe, Menü, Navi, Ausgabe, Rubin, Abschnitt, Zusammenfassung, Zeit, Marke, Audio, Video Marge: 0; Polsterung: 0; Grenze: 0; Schriftgröße: 100%; font: erben; vertikal ausrichten: Grundlinie;  / * HTML5-Anzeige-Rollen-Reset für ältere Browser * / Artikel, beiseite, Details, Abbildung, Fußzeile, Kopfzeile, hgroup, Menü, nav, Abschnitt display: block;  body Zeilenhöhe: 1;  ol, ul list-style: none;  blockquote, q Anführungszeichen: keine;  blockquote: before, blockquote: after, q: before, q: after content: "; content: none; table border-collapse: collapse; border-spacing: 0; 

Nun müssen Sie Ihre Hauptdatei style.scss öffnen und diese Zeile hinzufügen, in der die zurückgesetzte Datei importiert werden soll:

 @import 'reset'; 

Beachten Sie, dass Sie nicht den vollständigen Dateinamen eingeben müssen. Um dies zu kompilieren, müssen Sie Koala öffnen und erneut auf die Schaltfläche zum Kompilieren klicken. Öffnen Sie nun die Datei style.css Ihres Themes, und Sie sehen, dass Ihre Reset-CSS darin enthalten ist.

Nestin in Sass

Im Gegensatz zu HTML ist CSS keine verschachtelte Sprache. Mit Sass können Sie verschachtelte Dateien erstellen, die einfach zu verwalten sind und mit denen Sie arbeiten können. Zum Beispiel können Sie alle Elemente für die verschachteln Abschnitt unter der Artikelauswahl. Als WordPress-Design-Designer können Sie damit an verschiedenen Abschnitten arbeiten und die einzelnen Elemente problemlos gestalten. Um das Nestin in Aktion zu sehen, fügen Sie es Ihrem hinzu style.scss Datei:

 .Eintragsinhalt p Schriftgröße: 12px; Zeilenhöhe: 150%;  ul Zeilenhöhe: 150%;  a: link, a: besucht, a: active Textdekoration: keine; Farbe: # ff6633;  

Nach der Verarbeitung wird das folgende CSS ausgegeben:

 .Eintragsinhalt p Schriftgröße: 12px; Zeilenhöhe: 150%;  .entry-content ul Zeilenhöhe: 150%;  .entry-content a: link, .entry-content a: besucht, .entry-content a: active Textdekoration: keine; Farbe: # ff6633;  

Als Design-Designer entwerfen Sie ein anderes Aussehen und Verhalten für Widgets, Posts, Navigationsmenüs, Kopfzeilen usw. Durch die Verwendung von nestin in Sass ist es gut strukturiert und Sie müssen nicht dieselben Klassen, Selektoren und Bezeichner über und schreiben erneut.

Mixins in Sass verwenden

Manchmal müssen Sie CSS in Ihrem gesamten Projekt wiederverwenden, auch wenn die Stilregeln gleich sind, da Sie sie für verschiedene Selektoren und Klassen verwenden. Dies ist, wo Mixins nützlich sind. Fügen Sie Ihrer style.scss-Datei ein Mixin hinzu:

 @mixin hide-text overflow: ausgeblendet; Text-Gedankenstrich: -9000px; Bildschirmsperre;  

Dieses Mixin verbirgt im Wesentlichen die Anzeige von Text. Hier ein Beispiel, wie Sie mit diesem Mixin Text für Ihr Logo ausblenden können:

 .logo background: url ("logo.png"); Höhe: 100px; Breite: 200px; @einschließen Ausblenden-Text;  

Beachten Sie, dass Sie verwenden müssen @umfassen ein mixin hinzufügen. Nach der Verarbeitung wird das folgende CSS generiert:

 .logo background: url ("logo.png"); Höhe: 100px; Breite: 200px; Überlauf versteckt; Text-Gedankenstrich: -9000px; Bildschirmsperre;  

Mixins sind auch bei Herstellerpräfixen sehr hilfreich. Wenn Sie Deckkraftwerte oder Randumrandungen hinzufügen, können Sie mit Mixins viel Zeit sparen. Schauen Sie sich dieses Beispiel an, wo wir ein Mixin hinzugefügt haben, um den Grenzradius hinzuzufügen.

 @mixin border-radius ($ radius) -webkit-border-radius: $ radius; -moz-border-radius: $ radius; -ms-border-radius: $ radius; -o-border-radius: $ radius; Grenzradius: $ Radius;  .largebutton @include border-radius (10px);  .smallbutton @include border-radius (5px);  

Nach dem Kompilieren wird das folgende CSS generiert:

 .Largebutton -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; Grenzradius: 10px;  .smallbutton -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; Grenzradius: 5px;  

Wir hoffen, dass dieser Artikel Ihr Interesse an Sass für die Entwicklung eines WordPress-Themas geweckt hat. Viele WordPress-Theme-Designer verwenden es bereits. Einige gehen sogar so weit, dass in Zukunft alle CSS vorverarbeitet werden und WordPress-Theme-Entwickler ihr Spiel auf Vordermann bringen müssen. Lassen Sie uns wissen, was Sie über die Verwendung einer CSS-Präprozessorsprache wie Sass für Ihre WordPress-Theme-Entwicklung denken, indem Sie unten einen Kommentar hinterlassen.

Zusätzliche Ressourcen

Sass Lang
Der Sass-Weg