Wechseln Sie in WordPress von CSS zu Sass

Dieser Artikel erschien ursprünglich in Ausgabe 265 des Netzmagazins

Jeder gute Entwickler weiß, wie er nach wiederholten Arbeiten suchen und seinen Computer alltägliche, sinnlose Aufgaben erledigen kann. CSS-Präprozessoren wie Sass bieten uns mehrere wertvolle Tools zur Automatisierung des Frontend-Codierungsprozesses. Zum Beispiel können wir mit Sass Variablen verwenden. Anstatt einen Befehl zum Suchen und Ersetzen in einer langen CSS-Datei auszuführen, um einen Farbwert zu optimieren, können wir einfach die Variablendefinition ändern.

Mit Sass können wir auch Funktionen schreiben, um Blöcke mit wiederholtem Stilcode zu generieren. Beispielsweise könnte eine Schaltflächenfunktion die Farbe oder den Stil als Parameter akzeptieren und das gesamte Standard-CSS für die Schaltflächen-Benutzeroberfläche einer Site generieren: Rahmenradius, Verläufe, Textfarben usw. Wir können unsere riesigen Stylesheets auch in organisierte Module aufteilen. Nahezu jedes CMS, Plugin und jede Web-App verwendet Verzeichnisse und Partials, um die Wartbarkeit des Codes zu verbessern: Mit Sass können wir dies mit unserem CSS tun.



Die in diesem Tutorial erläuterten Techniken sind spezifisch für Sass SCSS-Syntax , aber sie sind auf die meisten anderen Präprozessoren anwendbar - wie Weniger oder Stift - auch.

Konvertieren von Themen-Stylesheets

Wenn das von Ihnen verwendete WordPress-Design bereits Sass-Dateien enthält, wird der Prozess zum Konvertieren vorhandener Design-Stylesheets in Sass für Sie durchgeführt. Normalerweise beginne ich neue Themen mit der Vorlage für Unterstriche von Automattic (underscores.me). Wenn Sie ein neues Themenpaket von der Website erstellen, finden Sie ein '_sassify!' Option, wenn Sie auf den Link 'Erweiterte Optionen' klicken. Dadurch erhalten Sie die Standard-Sass-Bibliothek von Automattic, wenn Sie das leere Thema herunterladen.

Unterstriche

Das WordPress-Thema 'Unterstriche' bietet Benutzern die Möglichkeit, eine Version des Themas herunterzuladen, die bereits Sass-Partials enthält

Wenn das zu erstellende oder zu ändernde Thema jedoch keine Sass-Dateien enthält, konvertieren Sie zunächst die vorhandene CSS-Datei in Sass. Dieser Schritt zeigt einen großen Vorteil bei der Verwendung von Sass (SCSS): Der Sass-Compiler liest einfaches CSS ohne Probleme. Alles, was Sie tun müssen, um die ursprüngliche style.css als Sass zu verwenden, ist, sie zu duplizieren und sie in style.scss umzubenennen.

mickey mouse bilder von mickey mouse

Einrichten von Sass-Partials

Ich habe bereits erwähnt, dass Sass unseren Workflow verbessert, indem wir Tausende von CSS-Zeilen in modulare Dateien aufteilen können, die als Partials bezeichnet werden. Lassen Sie uns diesen Schritt durcharbeiten, bevor wir zu den Compilermethoden gelangen.

Wenn Sie eine vorhandene CSS-Datei in Sass konvertiert haben, haben Sie bisher nur eine .scss-Datei, die genauso unhandlich ist wie die CSS-Datei, aus der sie stammt. An diesem Punkt können Sie Variablen verwenden und Mixins oder Funktionen schreiben, aber der Sass ist noch nicht modular oder organisiert. Sie möchten Ihre CSS-Datei in Abschnitte gruppieren, die individuellen Zwecken dienen. Das Ziel ist es, anhand des Dateinamens herauszufinden, wo Code gefunden wird.

Einige Codemodule, die Sie wahrscheinlich isolieren möchten, umfassen Navigation, typografische Stile, Seitenleisten-Widgets, Fußzeile und ein Rastersystem (obwohl diese Liste keineswegs vollständig ist, ist sie nur ein Ausgangspunkt).

Anschließend schneiden Sie jeden modularen Abschnitt von CSS aus und fügen ihn in einen eigenen Sass-Teil ein. Der Dateiname eines Sass-Teils beginnt immer mit einem Unterstrich (_). Dies weist Compiler an, keine eindeutige CSS-Datei basierend auf dieser Sass-Datei zu erstellen.

Eine Compiler-App, die einen Ordner voller Sass überwacht und automatisch CSS generiert, erstellt style.css basierend auf style.scss, jedoch keine navigation.css basierend auf _navigation.scss. Um alle Partials zu kompilieren, die Sie gerade erstellt haben, importieren Sie sie in Ihre Sass-Hauptdatei.

Jedes Mal, wenn Sie einen Codeblock in einen Teil kopieren, ersetzen Sie ihn in der primären .scss-Datei durch @import 'Teilname';. Wenn Sie Ihre Fußzeilenstile in _footer.scss verschieben, fügen Sie @import 'footer'; hinzu. Nehmen Sie nicht das _ oder das .scss in den Import auf: nur den Namen der Datei.

Wenn Sie sich wirklich organisieren und die Kopf- und Fußzeilennavigation in zwei separate Teilbereiche in einem Ordner / navigation / aufteilen möchten, geben Sie den Ordnernamen in den Import ein:

@import 'navigation/header-nav'; // imports /navigation/_header-nav.scss @import 'navigation/footer-nav'; // imports /navigation/_footer-nav.scss

Es ist wichtig zu beachten, dass die CSS-Kaskade weiterhin für in Sass geschriebenen Code gilt. Stile, die in später importierten Partials geschrieben wurden, können Stile in früher importierten Partials überschreiben.

Es ist auch ratsam, Partials zu importieren, die Ihre Mixins und Variablen am Anfang Ihrer primären Sass-Datei enthalten, damit spätere Partials diese Variablen und Mixins tatsächlich verwenden können.

WordPress-Kommentare

Gemäß den Anforderungen von WordPress style.css müssen wir sicherstellen, dass unser Compiler die WordPress-Kommentare oben in style.css beibehält. Wenn Sass 'output_style auf 'komprimiert' gesetzt ist, werden beim Kompilieren von CSS alle Kommentare entfernt.

Fügen Sie am Anfang des Kommentarblocks in style.scss ein Ausrufezeichen (!) Ein, um sicherzustellen, dass diese Kommentare intakt bleiben.

wie man Comic-Stil färbt
/*! Theme Name: Sassy WordPress Theme Theme URI: http://jamessteinbach.com/sass/ Author: James Steinbach Author URI: http://jamessteinbach.com Description: From CSS to Sass Sample Theme Code */ // Import all your .scss partials below

Refactor CSS zu Sass

Nachdem wir ein langes Stylesheet in kleinere modulare Partials unterteilt haben, können wir damit beginnen, das ursprüngliche CSS so umzugestalten, dass es unseren Sass-Einstellungen entspricht. Einige hilfreiche Sass-Tools zum Refactoring von Code sind Variablen, Verschachtelungen, Funktionen und Mixins.

Wenn Sie einige Farben ändern oder eine Standardtypskala einrichten möchten, sind Variablen der beste Weg, um all diese Daten an einem einzigen Ort zu speichern und standortweite Änderungen einfach vorzunehmen. Wenn Sie noch keinen Teil mit dem Namen _variables.scss erstellt haben, empfehle ich, dies jetzt zu tun - und ihn oben in Ihre Sass-Hauptdatei zu importieren. Hier sind einige Variablen, die Sie in diesen Teil einfügen möchten:

$red: #FF4136; $blue: #0074D9; $blue-dark: #001F3F; $orange: #FF851B $type-small: 12px; $type-medium: 16px; $type-large: 21px; $type-hero: 44px;

Sobald Sie diese Variablen eingerichtet haben, können Sie Ihre Partials durchsuchen und Werte durch Variablennamen ersetzen:

body { color: $blue-dark; } .page-title { font-size: $type-large; }

Sie können eine Sass-Funktion namens 'Verschachtelung' verwenden, um komplexe Selektoren besser lesbar zu machen. Ihr Start-CSS kann Stile für mehrere Elemente in der Seitenleiste der Site enthalten:

.sidebar h1 { //styles } .sidebar p { //styles } .sidebar ul { //styles }

Sie können Stile in andere Stilblöcke verschachteln, und Sass kombiniert Selektoren, um die komplexen Selektoren zu erstellen. Der folgende Code wird mit derselben Ausgabe wie das ursprüngliche CSS kompiliert (wie im obigen Code gezeigt).

.sidebar { h1 { //styles } p { //styles } ul { //styles } }

Beim Verschachteln kann & als Platzhalter für die gesamte darüber liegende Auswahl von Selektoren verwendet werden. Da durch das Verschachteln ein Leerzeichen zwischen den Selektoren eingefügt wird, kann dies bei der Verwendung von Pseudoklassen und Pseudoelementen hilfreich sein:

a { color: $blue; &:hover { color: $blue-dark; } } .clearfix { &::before, &::after { content: ''; display: table; clear: both; } }

Das & kann auch verwendet werden, um die Reihenfolge der Selektoren zu duplizieren oder umzukehren:

p { & + & { margin-top: 1em; } } .menu-link { color: $gray; .menu-item:hover & { color: $gray-light; } }

Möglicherweise fragen Sie sich, ob es Ihre Zeit wert ist, durch Verschachteln von Eigenschaften eine Umgestaltung vorzunehmen. Während das Verschachteln die Lesbarkeit verbessern kann (obwohl dies subjektiv ist), ist es auch ein Werkzeug, das sorgfältig verwendet werden muss. Die meisten Sass-Experten empfehlen eine 'Inception-Regel' für die Sass-Verschachtelung: Verschachteln Sie niemals mehr als drei Ebenen tief. Es ist ratsam, Sass Nesting sparsam zu verwenden. Wenn es in Ihrem Workflow keinen Sinn ergibt, erzwingen Sie es nicht.

Sass

Sass ist die ausgereifteste, stabilste und leistungsfähigste CSS-Erweiterungssprache für Profis

Wenn Sie bestimmte Eigenschaften in Ihrem CSS wiederholt berechnen, können Sie diesen Prozess durch eine Sass-Funktion ersetzen. Eine Funktion übernimmt die von Ihnen angegebenen Parameter und gibt einen Wert zurück. Es werden keine CSS-Eigenschafts-Wert-Paare generiert, aber es können Werte für Sie generiert werden.

Hier ist ein Beispiel für eine Funktion zum Berechnen verblassener Farben beim Schweben:

// This goes in _functions.scss: @function hover-color($color) { @return lighten($color, 10%); } // This is how you use the function in other partials: .button { background-color: $red; &:hover { background-color: hover-color($red); } }

Wir können unseren Code auch umgestalten, indem wir wiederholte Codeblöcke nehmen und durch Mixins ersetzen. Ein gutes Beispiel für ein nützliches Mixin ist ein Clearfix.

// This goes in _mixins.scss: @mixin clearfix() { &::after { content: “”; display: table; clear: both; } } // This is how you use the mixin in other partials: .content-container { @include clearfix; }

Mixins können auch Parameter verwenden, um eine benutzerdefinierte Ausgabe zu generieren. Dies ist sehr nützlich für Entwurfsmuster wie Schaltflächen oder Warnungen:

wie man die Perspektive in Photoshop ändert
// This goes in _mixins.scss: @mixin alert($color) { border-radius: .5em; box-shadow: 0 0 .25em 0 rgba(0,0,0,.5); border-top: 4px solid $color; color: $color; } // This is how you use this mixin: .alert-error { @include alert($red); } .alert-success { @include alert($green); }

underscores.me

Das Thema underscores.me sortiert Partials in Ordner, darunter 'Elemente', 'Formulare', 'Layout' und 'Medien'.

Ein allgemeiner Ratschlag, den Sie möglicherweise online sehen, ist die Verwendung von Mixins für browserübergreifende Präfixe. Normalerweise empfehle ich jedoch dagegen. Ich finde, dass Autoprefixer ist eine viel bessere Möglichkeit, Präfixe zu automatisieren.

Wenn Sie Autoprefixer nicht ausführen können und sich auf Sass-Mixins verlassen müssen, Compass 'Mixin Bibliothek ermöglicht die Benutzerkonfiguration und bleibt auf dem neuesten Stand Kann ich benutzen Daten.

Organisieren Sie Ihre Partials

Zusammenfassend haben wir das vorhandene Stylesheet des Themas auseinander genommen und Code überarbeitet, um die Dinge sauberer und sassier zu machen. Jetzt können wir unsere Partials organisieren, um die Wartbarkeit auf lange Sicht zu verbessern.

Organisation Ihres CSS

Organisieren Ihres CSS Mit Sass können Entwickler Tools wie Variablen, Verschachtelungen, Funktionen und Mixins verwenden, um ihr CSS zu organisieren und zu automatisieren

Denken Sie daran, dass die Kaskade immer noch wichtig ist. Sass-kompiliertes CSS ist genau wie einfaches CSS, da Stile, die später im Stylesheet angezeigt werden, Stile überschreiben können, die früher angezeigt werden. Importieren Sie in der Regel Ihre allgemeinen Stile, bevor Sie bestimmte Stile importieren.

Ähnliche Partials können in Ordnern organisiert werden. Es gibt zwei Möglichkeiten, Sass-Partials aus Verzeichnissen zu importieren. Die erste besteht darin, jede Datei in style.scss einschließlich des Ordnernamens in der Importanweisung wie folgt zu importieren:

@import 'base/variables'; // imports _variables.scss from the /base/ directory @import 'base/mixins'; // imports mixins.scss from the /base/ directory @import 'base/grid'; // imports _grid.scss from the /base/ directory

Die zweite (und zugegebenermaßen kompliziertere) Methode besteht darin, in jedem Verzeichnis einen Platzhalterteil zu erstellen, der die anderen Teilwerte in dieses Verzeichnis importiert (nächste Spalte):

// in style.scss @import 'base/base'; // in /base/_base.scss @import 'variables'; // imports _variables.scss from the /base/ directory @import 'mixins'; // imports mixins.scss from the /base/ directory @import 'grid'; // imports _grid.scss from the /base/ directory

Beide Methoden importieren dieselben Partials in derselben Reihenfolge. Die erste Methode ist an der Oberfläche einfacher, aber die zweite Methode hat den Vorteil, dass style.scss sauber bleibt und jede Komplexität in die Module verlagert wird, auf die sie sich stützt.

wie man eine Farbe in Photoshop auswählt und ändert

Es gibt fast so viele Möglichkeiten, Sass-Partials zu organisieren, wie Entwickler versuchen, Sass-Partials zu organisieren. Im Feld 'Ressourcen' auf Seite 88 finden Sie einige gute Optionen.

Hier ist ein ziemlich einfaches Organisationsschema, das Sie verwenden können:

  • / base / (Variablen, Mixins, Reset, Typografie)
  • / layout / (Raster, Kopf- und Fußzeile)
  • / vendor / (Plugins, Anbieter usw.)
  • / components / (Schaltflächen, Menüs, Formulare, Widgets)
  • / pages / (Startseite, Zielseite, Portfolio)

Zusammenfassen

In diesem Artikel wird erst das Potenzial der Verwendung von Sass in der Entwicklung von WordPress-Designs untersucht. Die Chancen stehen gut, dass Sie jetzt nach weiteren Informationen suchen, insbesondere wenn dies das erste ist, was Sie zu diesem Thema gelesen haben.

Weitere Informationen zum Thema finden Sie im Feld 'Ressourcen'. Diese Artikel enthalten verschiedene Variationen eines Sass-WordPress-Workflows. Einige ihrer Ratschläge unterscheiden sich von den Empfehlungen, die ich empfohlen habe (insbesondere zum Thema Organisieren von Teilbereichen), aber das ist in Ordnung - finden Sie die Techniken und Workflows, die für Sie funktionieren!

James Steinbach hat zu diesem Tutorial einen exklusiven Screencast erstellt, den Sie unten sehen können.

Wörter: James Steinbach