sebastian lochbronner
Menü

Je umfangreicher ein Website-Projekt ist, desto länger und unübersichtlicher werden auch die CSS Dateien. Bevor man also mal eben etwas am Aussehen ändern möchte, muss man sich erst durch unzählige Zeilen Code kämpfen, um die richtige Stelle zu finden. Fehler schleichen sich ein, Werte können nicht wiederverwendet werden, Passagen wiederholen sich. Als CSS-Anwender wirft man wehmütig einen Blick zu anderen (Programmier-) Sprachen, welche über nützliche Funktionen wie Variablen und Co. verfügen.

CSS Präprozessoren

Zum Glück gibt es für dieses Problem eine Lösung in Form von CSS Präprozessoren. Der Name verrät bereits, dass diese am Anfang des Workflows zum Einsatz kommen. Aus schlanken Dateien, in denen „Variablen“, „Funktionen“ und „Mixins“ verwendet werden können, entstehen so die fertigen CSS-Dateien. Die bekanntesten Vertreter sind derzeit Sass, LESS und Stylus. Welcher dieser Präprozessoren zum Einsatz kommt, hängt unter anderem vom jeweiligen Projekt sowie den eigenen Vorlieben ab. In diesem Beitrag möchten wir uns Sass genauer ansehen, welches wir auch selbst für die Erstellung von (WordPress) Websites nutzen.

Sass (Syntactically Awesome Stylesheets)

Nach eigenen Angaben ist Sass “the most mature, stable, and powerful professional grade CSS extension language in the world.” Es ist im Jahr 2007 erschienen und wurde von Hampton Catlin entwickelt. Auf der offiziellen Website finden sich viele Beispiele sowie eine ausführliche Dokumentation: sass-lang.com

Die Kernfunktionen und damit Basis von Sass sind:

Mehr zu den einzelnen Funktionen erfahrt ihr im Folgenden.

Variablen

Wer kennt das nicht: bestimmte Werte wie HEX-Codes werden seitenübergreifend eingesetzt, müssen aber jedes Mal wieder neu getippt werden. Sind viele verschiedene Farben im Einsatz, ist es zudem oftmals nicht sofort ersichtlich, welches Snippet man jetzt kopieren soll. Abhilfe schaffen da Variablen, welchen man einfach die gewünschten Werte zuteilt. Diese kann man dann an jeder Stelle wiederverwenden.

Beispiel für Variablen (SCSS)

$font-family: 'Roboto', sans-serif;
$font-color: #111;

body {
   font: $font-family;
   color: $font-color;
}

Dieser Code wird umgewandelt in:

body {
   font: 'Roboto', sans-serif;
   color: #111;
}

Nesting

Anders wie bei HTML verfügt CSS über keine Möglichkeit der Verschachtelung. Sass dagegen schon, und dies erspart nicht nur Arbeit, sondern fördert auch die Übersichtlichkeit.

Beispiel für Nesting (SCSS)

.highlight {
   h1 {
      color: yellow;
   }

   a {
      text-decoration: underline;
   }

   p {
      font-weight: bold;
      font-size: 1.5rem;
   }
}

Dieser Code wird umgewandelt in:

.highlight h1 {
   color: yellow;
}

.highlight a {
   text-decoration: underline;
}

.highlight p {
   font-weight: bold;
   font-size: 1.5rem;
}

Import

Zwar bietet CSS bereits eine Import Funktion, jedoch wird dabei lediglich per HTTP eine weitere CSS Datei angefordert. Bei Sass können dagegen mehrere Dateien zu einer einzigen zusammengefügt werden.

Beispiel für Import anhand von style.scss und _font.scss (SCSS)

// style.scss

body {
   background-color: #eee;
}

@import ‘font’;

footer {
   display: block;
}

 

// _font.scss

h1 {
   font-size: 2rem;
   color: #aaa;
}

Diese beiden getrennten SCSS Dateien werden kombiniert und man erhält folgenden Code:

body {
   background-color: #eee;
}

h1 {
   font-size: 2rem;
   color: #aaa;
}

footer {
   display: block;
}

Es empfiehlt sich bei größeren Projekten mit einer sinnvollen Anzahl solcher Importdateien zu arbeiten, damit die Übersicht erhalten werden kann. Ein weiterer Vorteil ist, dass so einzelne Module auch in einem anderen Projekt verwendet werden können. Es ist zu beachten, dass die Namen der zu importierenden SCSS Dateien mit einem Unterstrich beginnen müssen.

Mixins

Wiederkehrende Funktionen und Vorlagen, Mixins genannt, sind eine weitere nützliche Erweiterung, die euch das Arbeiten mit CSS Dateien erleichtert. Eine einmal erstellte Vorlage lässt sich beliebig oft im gesamten Projekt verwenden.

Beispiel für Mixins (SCSS)

@mixin border-radius($radius) {
   -webkit-border-radius: $radius;
   -moz-border-radius: $radius;
   -ms-border-radius: $radius;
   border-radius: $radius;
}

.button {
   @include border-radius(20px);
}

Dieser Code wird folgendermaßen interpretiert:

.button {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   border-radius: 20px;
}

Extend / Inheritance

Eine weitere Möglichkeit, überflüssigen Code einzusparen. Bestehende CSS Selektoren werden einfach durch Platzhalter erweitert.

Beispiel für Extend / Inheritance (SCSS)

%meldung {
   border: 2px dotted #000;
   padding: 5px 10px;
   font-weight: 800;
}

.nachricht {
   @extend %meldung;
}

.erfolg {
   @extend %meldung;
   color: green;
}

.error {
   @extend %meldung;
   color: red;
}

.warnung {
   @extend %meldung;
   color: yellow;
}

Dieser Code wird umgewandelt zu:

.nachricht, .erfolg, .error, .warnung {
   border: 2px dotted #000;
   padding: 5px 10px;
   font-weight: 800;
}

.erfolg {
   color: green;
}

.error {
   color: red;
}

.warnung {
   color: yellow;
}

Operators

Hin und wieder ist es in CSS nötig, mathematische Berechnungen anzustellen. Sass bringt dafür die nötigen Operatoren mit.

Beispiel für Operators (SCSS)

.main {
   width: 800px / 960px * 100%;
}

Daraus wird dann:

.main {
   width: 83.33333%;
}

Wie erhalte ich nun meine fertige CSS-Datei?

Hierfür benötigt ihr einen passenden Compiler. Wir verwenden aktuell Prepros für Windows, es gibt allerdings auch noch zahlreiche andere Vertreter wie beispielsweise CodeKit (Mac) und Compass (Windows + Mac).

[Update: seit 2017 gibt es jetzt auch ohne Präprozessor die Möglichkeit Variablen einzusetzen, siehe dazu CSS Custom Properties; wir empfehlen trotzdem weiterhin den Einsatz von Präprozessoren wie Sass oder LESS, da Variablen ja nicht das einzige Feature ist.]

Frameworks haben sich zu einem wichtigen Bestandteil der WordPress-Landschaft etabliert. Sie ergänzen das CMS um zahlreiche Features und machen damit das Leben für WordPress-Entwickler wie auch -Benutzer einfacher

In diesem Artikel möchten wir uns mit folgenden Fragen beschäftigen:

WordPress Frameworks - ein schneller Einstieg

Ein Framework ist in gewisser Weise eine spezielle Art von WordPress-Theme bzw. WordPress-Plugin, welches Einfluss auf das Aussehen und die Funktionen der Website hat. Es gibt verschiedene Wege, wie ein solches Framework eingebunden werden kann, beispielsweise als Parent-Theme (mit eigene Child-Themes), als eigenständiges Theme (ohne Child-Themes), oder als Plugin (ergänzt um ein passendes Theme). Der wesentliche Unterschied zwischen einem (Starter-) Theme und einem Framework ist, dass erstes lediglich auf die Core-Funktionalitäten von WordPress zurückgreift, während zweites diese erweitert. Wer also nur "optischen Beistand" bei der Entwicklung einer WordPress-Website ersucht, ist mit einem einfachen Theme bereits bedient. Wer dagegen die Grundfunktionen von WordPress erweitern möchte, der kann sich am immer größeren werdenden Framework-Gabentisch bedienen.

Verschiedene Einsatzgebiete

Die Entwickler von WordPress Frameworks bedienen im Großen und Ganzen zwei verschiedene Einsatzgebiete:

Drei Vorteile von WordPress Frameworks

Vorteil #1: Ein Framework kann ein echter Kickstarter für ein neues WordPress-Projekt sein, denn man fängt nicht bei Null an, sondern kann auf die Entwicklungsleistung anderer Programmierer zurückgreifen. Die große Community, welche gerade bei den beliebtesten Frameworks für einen stetigen Strom an neuen Themes, Plugins und Code-Snippets sorgt, erleichtert die Arbeit ungemein und die ganze Nutzerschaft kann davon profitieren.

Vorteil #2: Mit Frameworks wird eine Seite sehr update- und anpassungsfähig. Egal ob eine neue Theme-Version installiert oder das Aussehen komplett geändert werden soll, die Grundfunktionen des Frameworks sowie die dort festgelegten Einstellungen bleiben stets erhalten. Für Updates liefern die meisten Frameworks bereits einen Button im Backend mit, weshalb sich der Nutzer nicht mit einer manuellen Aktualisierung via FTP beschäftigen muss.

Vorteil #3: Sicherheit und SEO - durch den Einsatz von (starken) Frameworks profitiert die gesamte Website von einer erhöhten Sicherheit sowie einer verbesserten Suchmaschinenfreundlichkeit.

Die Quahl der Wahl - welches Framework ist für mein Projekt das richtige?

Eine pauschale Antwort auf diese Frage lässt sich leider nicht machen, denn dafür sind Websites und deren Ersteller/Nutzer einfach zu unterschiedlich. Jeder Entwickler bzw. Webdesigner hat persönliche Präferenzen, außerdem liefert jedes Framework unterschiedliche Funktionen mit. Einen Gesamtsieger für jeden Anwendungsfall kann es daher nicht geben. Die Auswahl muss deswegen individuell im Einzelfall getroffen werden. Zumindest eine Übersicht der derzeit beliebter WordPress Frameworks (Stand 2017) kann an dieser Stelle aber gegeben werden:

An dieser Stelle ein großes Dankeschön an alle Mitwirkenden, welche den Einsatz toller Frameworks erst ermöglichen!

-

Vielleicht interessiert dich ja auch mein themenrelevanter Artikel "13 Gründe, warum WordPress das beste CMS für Websites ist".

E-Mail senden
Sag hi!

Sebastian Lochbronner
86830 Schwabmünchen
Deutschland

Social

Lochbronner Design Studio goes codeblick - hier Artikel lesen