Als neuer WordPress-Theme-Designer würden Sie schnell die Herausforderungen lernen, lange CSS-Dateien zu verwalten und sie gleichzeitig organisiert, skalierbar und lesbar zu halten. Sie werden auch erfahren, dass viele Designer und Frontend-Entwickler die Verwendung einer CSS-Präprozessorsprache wie Sass oder LESS empfehlen. Aber was sind das für Dinge? und wie fängt man damit an? Dieser Artikel ist eine Einführung in Sass für neue WordPress Theme Designer. Wir erklären Ihnen, was ein CSS-Präprozessor ist, warum Sie ihn brauchen und wie Sie ihn sofort installieren und verwenden können.
Was ist Sass?
Das von uns verwendete CSS wurde als einfach zu verwendende Stylesheet-Sprache entwickelt. Das Web hat sich jedoch weiterentwickelt und damit auch der Bedarf an Designern, eine Stylesheet-Sprache zu haben, die es ihnen ermöglicht, mit weniger Aufwand und Zeit mehr zu tun. CSS-Präprozessorsprachen wie Sass ermöglichen es Ihnen, Funktionen zu verwenden, die derzeit im CSS nicht verfügbar sind, wie die Verwendung von Variablen, grundlegenden mathematischen Operatoren, Verschachtelung, Mixins usw.
Es ist sehr ähnlich wie PHP, eine Präprozessorsprache, die ein Skript auf dem Server ausführt und eine HTML-Ausgabe generiert. In ähnlicher Weise verarbeitet Sass .scss-Dateien vor, um CSS-Dateien zu generieren, die von Browsern verwendet werden können.
Seit Version 3.8 wurden die Stile des WordPress-Administrationsbereichs portiert, um Sass für die Entwicklung zu verwenden. Es gibt viele WordPress-Theme-Shops und -Entwickler, die Sass bereits verwenden, um ihren Entwicklungsprozess zu beschleunigen.
Erste Schritte mit Sass für die Entwicklung von WordPress-Themes
Die meisten Designdesigner verwenden eine lokale Entwicklungsumgebung, um an ihren Designs zu arbeiten, bevor sie sie in einer Staging-Umgebung oder einem Live-Server bereitstellen. Da Sass eine Präprozessorsprache ist, müssen Sie sie in Ihrer lokalen Entwicklungsumgebung installieren.
Als erstes 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 Koala, eine kostenlose Open-Source-App, die für Mac, Windows und Linux verfügbar ist.
Für diesen Artikel müssen Sie ein leeres Design erstellen. Erstellen Sie einfach einen neuen Ordner in /wp-content/themes/
. Sie können es „mytheme“ nennen oder was immer Sie wollen. Erstellen Sie in Ihrem leeren Themenordner einen weiteren Ordner und nennen Sie ihn Stylesheets.
Im Stylesheets-Ordner müssen Sie ein style.scss
Datei mit einem Texteditor wie Notepad.
Jetzt müssen Sie Koala öffnen und auf das Plus-Symbol klicken, um ein neues Projekt hinzuzufügen. Suchen Sie als Nächstes Ihr Themenverzeichnis und fügen Sie es als Ihr Projekt hinzu. Sie werden feststellen, dass Koala die Sass-Datei automatisch in Ihrem Stylesheet-Verzeichnis findet und anzeigt.
Klicken Sie mit der rechten Maustaste auf Ihre Sass-Datei und wählen Sie Ausgabepfad einstellen Möglichkeit. Wählen Sie nun das Stammverzeichnis Ihres Themenverzeichnisses aus, z. /wp-content/themes/mytheme/
und drücken Sie die Eingabetaste. Koala generiert jetzt eine CSS-Ausgabedatei in Ihrem Themenverzeichnis. Um dies zu testen, müssen Sie Ihre Sass-Datei öffnen style.scss
in einem Texteditor wie Notepad und fügen Sie diesen Code hinzu:
$fonts: arial, verdana, sans-serif; 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 rechts eingeschoben. Um Ihre Sass-Datei zusammenzustellen, klicken Sie einfach auf das ‚Kompilieren‘ Taste. Sie können die Ergebnisse sehen, indem Sie das öffnen style.css
Datei in Ihrem Theme-Verzeichnis, und es wird das CSS wie folgt verarbeitet:
body { font-family: arial, verdana, sans-serif; }
Beachten Sie, dass wir eine Variable definiert haben $fonts
in unserer Sass-Datei. Wenn wir nun eine Schriftfamilie hinzufügen müssen, müssen wir die Namen aller Schriften nicht erneut eingeben. Wir können es einfach gebrauchen $fonts
.
Welche anderen Superkräfte bringt Sass zu CSS?
Sass ist unglaublich leistungsstark, abwärtskompatibel und super einfach zu erlernen. Wie bereits erwähnt, können Sie Variablen, Nesting, Mixins, Import, Partials, mathematische und logische Operatoren usw. erstellen. Jetzt zeigen wir Ihnen einige Beispiele und Sie können sie in Ihrem WordPress-Theme ausprobieren.
Mehrere Stylesheets verwalten
Ein häufiges Problem, mit dem Sie als WordPress-Designer konfrontiert werden, sind große Stylesheets mit vielen Abschnitten. Sie werden wahrscheinlich viel nach oben und unten scrollen, um Probleme zu beheben, während Sie an Ihrem Thema arbeiten. Mit Sass können Sie mehrere Dateien in Ihr Haupt-Stylesheet importieren und eine einzelne CSS-Datei für Ihr Theme 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-Anfrage an den Server sendet. Dies wirkt sich auf die Ladezeit Ihrer Seite aus, was für Ihr Projekt nicht gut ist. Auf der anderen Seite, wenn Sie @import in Sass verwenden, werden die Dateien in Ihre Sass-Datei aufgenommen und alle in einer einzigen CSS-Datei für die Browser bereitgestellt.
Um zu lernen, wie man @import in Sass verwendet, müssen Sie zuerst ein . erstellen reset.scss
Datei im Stylesheets-Verzeichnis deines Themes und füge diesen Code darin ein.
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
Jetzt müssen Sie Ihre Hauptdatei style.scss öffnen und diese Zeile hinzufügen, in der die Reset-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 Kompilieren klicken. Öffnen Sie nun die Style.css-Hauptdatei Ihres Themes, und Sie sehen, dass Ihr 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 und zu bearbeiten sind. Sie können beispielsweise alle Elemente für die <article>
Abschnitt unter der Artikelauswahl. Als WordPress-Theme-Designer können Sie auf diese Weise an verschiedenen Abschnitten arbeiten und jedes Element einfach stylen. Um Nestin in Aktion zu sehen, füge dies zu deinem . hinzu style.scss
Datei:
.entry-content { p { font-size:12px; line-height:150%; } ul { line-height:150%; } a:link, a:visited, a:active { text-decoration:none; color: #ff6633; } }
Nach der Verarbeitung wird folgendes CSS ausgegeben:
.entry-content p { font-size: 12px; line-height: 150%; } .entry-content ul { line-height: 150%; } .entry-content a:link, .entry-content a:visited, .entry-content a:active { text-decoration: none; color: #ff6633; }
Als Theme-Designer entwickelst du verschiedene Look-and-Feel für Widgets, Beiträge, Navigationsmenüs, Header usw. Die Verwendung von nestin in Sass macht es gut strukturiert und du musst nicht die gleichen Klassen, Selektoren und Bezeichner überschreiben und erneut.
Verwenden von Mixins in Sass
Manchmal müssen Sie CSS im gesamten Projekt wiederverwenden, obwohl die Stilregeln dieselben sind, da Sie sie für verschiedene Selektoren und Klassen verwenden. Hier kommen Mixins zum Einsatz. Lassen Sie uns Ihrer style.scss-Datei ein Mixin hinzufügen:
@mixin hide-text{ overflow:hidden; text-indent:-9000px; display:block; }
Dieses Mixin verbirgt im Grunde einige Texte vor der Anzeige. Hier ist ein Beispiel dafür, wie Sie dieses Mixin verwenden können, um Text für Ihr Logo auszublenden:
.logo{ background: url("logo.png"); height:100px; width:200px; @include hide-text; }
Beachten Sie, dass Sie verwenden müssen @include
um eine Mischung hinzuzufügen. Nach der Verarbeitung wird das folgende CSS generiert:
.logo { background: url("logo.png"); height: 100px; width: 200px; overflow: hidden; text-indent: -9000px; display: block; }
Mixins sind auch bei Vendor-Präfixen sehr hilfreich. Beim Hinzufügen von Deckkraftwerten oder Randradien können Sie mit Mixins viel Zeit sparen. Schauen Sie sich dieses Beispiel an, in dem wir ein Mixin hinzugefügt haben, um den Randradius hinzuzufügen.
@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $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; border-radius: 10px; } .smallbutton { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
Wir hoffen, dass dieser Artikel Ihr Interesse an Sass für die Entwicklung von WordPress-Themes geweckt hat. Viele WordPress-Theme-Designer verwenden es bereits. Manche gehen sogar so weit zu sagen, dass in Zukunft alle CSS vorverarbeitet werden und WordPress-Theme-Entwickler ihr Spiel verbessern müssen. Teilen Sie uns Ihre Meinung zur Verwendung einer CSS-Präprozessorsprache wie Sass für Ihre WordPress-Theme-Entwicklung mit, indem Sie unten einen Kommentar hinterlassen.