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

Als neuer WordPress-Theme-Designer lernen Sie schnell die Herausforderungen kennen, lange CSS-Dateien zu pflegen und sie gleichzeitig organisiert, skalierbar und lesbar zu halten.

Viele Designer und Frontend-Entwickler, einschließlich derer hier bei WPBeginner, empfehlen die Verwendung einer CSS-Präprozessor-Sprache wie Sass oder LESS, um die Arbeit zu erleichtern. Aber was sind diese Präprozessoren? 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 benötigen und wie Sie ihn sofort installieren und verwenden können.

Was ist Sass (Syntactically Awesome Stylesheet)?

Das CSS, das wir verwenden, wurde als einfach zu bedienende Stylesheet-Sprache entwickelt. Das Web hat sich jedoch weiterentwickelt, und so müssen Designer eine Stylesheet-Sprache haben, die es ihnen ermöglicht, mit weniger Aufwand und Zeit mehr zu tun.

CSS-Präprozessor-Sprachen wie Sass ermöglichen die Verwendung von Funktionen, die derzeit in CSS nicht verfügbar sind, wie z. B. Variablen, grundlegende mathematische 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. Ebenso verarbeitet Sass .scss-Dateien, um CSS-Dateien zu generieren, die von Browsern verwendet werden können.

Seit Version 3.8 wurden die Stile des WordPress-Adminbereichs portiert, um Sass für die Entwicklung zu nutzen. Es gibt viele WordPress-Theme-Shops und Entwickler, die Sass bereits nutzen, um ihren Entwicklungsprozess zu beschleunigen.

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

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

Das erste, was Sie tun müssen, ist Sass zu installieren. Es kann als Kommandozeilen-Tool verwendet werden, aber es gibt auch einige nette GUI-Apps für Sass. Wir empfehlen die Verwendung von Koala, einer kostenlosen Open-Source-App für Mac, Windows und Linux.

Für diesen Artikel müssen Sie ein leeres Theme erstellen. Erstellen Sie einfach einen neuen Ordner in /wp-content/themes/. Sie können ihn 'mytheme' oder beliebig anders benennen. Erstellen Sie innerhalb Ihres leeren Theme-Ordners einen weiteren Ordner und nennen Sie ihn stylesheets.

Im Ordner stylesheets müssen Sie eine Datei style.scss mit einem Texteditor wie Notepad erstellen.

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

Klicken Sie mit der rechten Maustaste auf Ihre Sass-Datei und wählen Sie die Option Ausgabepfad festlegen. Wählen Sie nun das Stammverzeichnis Ihres Themes aus, z. B. /wp-content/themes/mytheme/, und drücken Sie die Eingabetaste. Koala generiert nun die CSS-Ausgabedatei in Ihrem Theme-Verzeichnis.

Um dies zu testen, müssen Sie Ihre Sass-Datei style.scss in einem Texteditor wie Notepad öffnen und diesen Code hinzufügen:

$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 auf der rechten Seite eingeblendet. Um Ihre Sass-Datei zu kompilieren, klicken Sie einfach auf die Schaltfläche ‘Compile’.

Sie können die Ergebnisse sehen, indem Sie die Datei style.css in Ihrem Theme-Verzeichnis öffnen. Sie enthält den verarbeiteten CSS-Code wie folgt:

body {
  font-family: arial, verdana, sans-serif; }

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

Welche anderen Superkräfte bringt Sass für CSS mit sich?

Sass ist unglaublich leistungsfähig, abwärtskompatibel und super einfach zu erlernen. Wie wir bereits erwähnt haben, können Sie Variablen, Verschachtelung, Mixins, Import, Partials, mathematische und logische Operatoren usw. erstellen.

Jetzt zeigen wir Ihnen einige Beispiele, die Sie auf Ihrem WordPress-Theme ausprobieren können.

Verwaltung mehrerer Stylesheets

Ein häufiges Problem, mit dem Sie als WordPress-Theme-Designer konfrontiert werden, sind große Stylesheets mit vielen Abschnitten. Sie werden wahrscheinlich viel auf und ab scrollen, um Dinge zu reparieren, während Sie an Ihrem Theme arbeiten.

Mit Sass können Sie mehrere Dateien in Ihre 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 ist, dass Ihre CSS-Datei jedes Mal, wenn Sie ein @import hinzufügen, eine weitere HTTP-Anfrage an den Server sendet. Dies beeinträchtigt die Ladezeit Ihrer Seite, was für Ihr Projekt nicht gut ist.

Wenn Sie in Sass @import 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 eine Datei reset.scss in Ihrem Theme-Verzeichnis stylesheets erstellen und diesen Code darin einfügen.

/* 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, wo Sie die reset-Datei importieren möchten:

@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 Haupt-style.css-Datei Ihres Themes, und Sie werden sehen, dass Ihr Reset-CSS darin enthalten ist.

Verschachtelung in Sass

Im Gegensatz zu HTML ist CSS keine verschachtelte Sprache. Sass ermöglicht es Ihnen, verschachtelte Dateien zu erstellen, die einfach zu verwalten und zu bearbeiten sind. Sie können beispielsweise alle Elemente für den <article>-Abschnitt unter dem article-Selektor verschachteln.

Als WordPress-Theme-Designer können Sie so an verschiedenen Abschnitten arbeiten und jedes Element einfach gestalten. Um Verschachtelung in Aktion zu sehen, fügen Sie dies zu Ihrer style.scss-Datei hinzu:

.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 folgender CSS-Code 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 werden Sie ein anderes Aussehen und Gefühl für Widgets, Beiträge, Navigationsmenüs, Header usw. entwerfen. Die Verwendung von Verschachtelung in Sass macht es gut strukturiert, und Sie müssen nicht immer wieder dieselben Klassen, Selektoren und Bezeichner schreiben.

Mixins in Sass verwenden

Manchmal müssen Sie CSS in Ihrem Projekt wiederverwenden, auch wenn die Stilregeln gleich sind, da Sie sie auf verschiedene Selektoren und Klassen anwenden werden. Hier sind Mixins nützlich. Fügen wir Ihrem style.scss-File ein Mixin hinzu:

@mixin hide-text{
    overflow:hidden;
    text-indent:-9000px;
    display:block;
}

Dieses Mixin blendet im Grunde einige Texte aus, damit sie nicht angezeigt werden. Hier ist ein Beispiel, 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 @include verwenden müssen, um einen Mixin hinzuzufügen. Nach der Verarbeitung wird folgender CSS-Code generiert:

.logo {
  background: url("logo.png");
  height: 100px;
  width: 200px;
  overflow: hidden;
  text-indent: -9000px;
  display: block; }

Mixins sind auch sehr hilfreich bei Vendor-Präfixen. Beim Hinzufügen von Deckkraftwerten oder Rand-Radien können Sie mit Mixins viel Zeit sparen. Sehen Sie sich dieses Beispiel an, bei dem wir einen Mixin zum Hinzufügen von Rand-Radien hinzugefügt haben.

@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 der Kompilierung 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; }

Zusätzliche Ressourcen

Sass Lang
The Sass Way

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, Sass für die Entwicklung von WordPress-Themes kennenzulernen. Viele WordPress-Theme-Designer nutzen es bereits. Einige gehen sogar so weit zu sagen, dass in Zukunft alle CSS vorverarbeitet werden und WordPress-Theme-Entwickler ihr Spiel verbessern müssen. Möglicherweise möchten Sie auch unseren Leitfaden zu WordPress Body Class Tipps für Theme-Designer oder unsere Expertenauswahl der besten Drag-and-Drop-WordPress-Page-Builder sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.