Stylus – die Stylesheet-Sprache für Node.js

stylusWenn man das Design einer Website umsetzt, verwendet man dafür meist die Stylesheet-Sprache CSS. Dies macht auch Sinn, da alle zeitgemäßen Webbrowser CSS unterstützen.

Wenn das Design einer Website jedoch komplex wird, kann es schwierig werden, den Überblick zu behalten. Das folgende Beispiel sollte dies verdeutlichen:

#header { background-color: #09f; }
h1, h2 { color: #09f; }

Dieser CSS-Code macht nichts weiter, als dem HTML-Element mit der ID #header die Hintergrundfarbe #09f, sowie allen h1– und h2-Elemente die gleichfarbige Textfarbe #09f zu geben, was einem hellen blau entspricht. So weit so gut, aber was ist wenn wir die Farbe ändern möchten? Wir müssten die Werte alle Attribute, welche den Wert #09f enthalten, ändern. In diesem Beispiel ist das leicht gemacht, da diese Farbe nur zweimal verwendet wird.

Aber was ist wenn wir ein komplexes Design haben, dass bestimmte Farben, Schriftarten, Schriftgrößen sowie weitere Werte einheitlich verwendet? Es wäre ziemlich aufwendig und mühsam, alle Werte einzeln zu ändern. Man bräuchte also etwas wie Variablen, in deinen man einen Wert speichert, und die man dann an mehren Stellen Einsätzen kann. Leider unterstützt CSS jedoch keine Variablen.

Um dieses sowie andere weitaus größere Probleme zu lösen – die CSS bei komplexen Designs hervorbringen kann – wurden Präprozessoren entwickelt, die eine abstrakte Stylesheet-Sprache in CSS umgewandelt. Man kann also das gesamte Design in einer CSS-ähnlichen Sprache schreiben, die erweiternde Funktionen wie z.B. Variablen, Berechnungen, geschachtelte Regeln und sich wiederholende Anweisungen kennt, und dann anschließend zu CSS kompiliert wird.

Die bekanntesten dieser Sprachen sind wahrscheinlich LESS, SASS und Stylus. Alle drei sind als Modul für Node.js erhältlich, auf letztere – nämlich Stylus – gehe ich in diesem Artikel genauer ein.

Syntax #

Nachdem ich mir alle dieser drei Sprachen genauer angesehen habe, erschien mir letztendlich Stylus für meine Zwecke am besten geeignet. Stylus ist in Javascript geschrieben, und wurde speziell für Node.js entwickelt. Während sich LESS bei der Syntax an CSS orientiert, und diese lediglich um zusätzliche Funktionen erweitert, ist die Syntax von Stylus zusätzlich so minimal wie nur möglich gehalten. Anstatt

body{
    font-size: 14px;
    color: #333;
}
h1{
    font-size: 24px;
}

zu schreiben, wird von Stylus nur folgendes benötigt:

body
    font-size 14px
    color #333
h1
    font-size 24px

Geschweifte Klammern, Doppelpunkte und Semikolons können bei Stylus weggelassen werden, stattdessen werden die Werte mit Einrückungen (Leerzeichen oder Tabs) dem Selektor zugeordnet.

Variablen #

Um nun auf das Beispiel mit der Variable zurückzukommen, in Stylus definiert man Variablen wie folgt:

farbe = #09f
#header
    background-color farbe
h1, h2
    color farbe

Dies wird nun kompiliert zu:

#header {
    background-color: #09f;
}
h1, h2 {
    color: #09f;
}

Rechnen #

Außerdem lässt sich mit Stylus Rechnen. Im folgendem Beispiel verwende ich eine Basis-Schriftgröße von 14px, die bei den Überschriften-Elementen <h1> bis <h5> multipliziert wird.

baseFontSize = 14px
body
    font-size baseFontSize
h1
    font-size baseFontSize * 3
h2
    font-size baseFontSize * 2.5
h3
    font-size baseFontSize * 2
h4
    font-size baseFontSize * 1.5
h5
    font-size baseFontSize * 1.2
    font-weight bold

Dies ergibt den folgenden CSS-Code:

body {
  font-size: 14px;
}
h1 {
  font-size: 42px;
}
h2 {
  font-size: 35px;
}
h3 {
  font-size: 28px;
}
h4 {
  font-size: 21px;
}
h5 {
  font-size: 16.8px;
  font-weight: bold;
}

geschachtelte Selektoren #

CSS ermöglicht es, Selektoren zu kombinieren. So könnten beispielsweise mit #navigation ul nur die ul-Elemente angesprochen werden, die dem Element mit der ID #navigation folgen. Bei komplexen Verschachtelungen kann dies aber schnell unübersichtlich werden, und wenn man z.B. die ID #navigation in #menu ändert, so müsste man auch alle darauf aufbauenden Selektoren ändern.

Stylus ermöglicht, Selektoren ineinander zu verschachteln. Anstatt die übergeordneten Selektoren immer erneut zu wiederholen, können sie durch Einrückungen verschachtelt werden.

#navigation
    width 500px
    ul
        list-style none
        li
            width 100px
            a
                color #00f
                &:hover
                    background-color #fff
                    color #f00

Dies ergibt:

#navigation {
  width: 500px;
}
#navigation ul {
  list-style: none;
}
#navigation ul li {
  width: 100px;
}
#navigation ul li a {
  color: #00f;
}
#navigation ul li a:hover {
  background-color: #fff;
  color: #f00;
}

Funktionen #

Mit Stylus lassen sich auch Funktionen erstellen. Diese sind besonders für CSS3-Anweisungen sinnvoll, da noch nicht alle Browser CSS3 vollständig unterstützen, und somit von einigen ein Präfix benötigt wird, wodurch man Anweisungen mehrfach schreiben muss.

Auch hier kann Stylus einiges an Schreibarbeit sparen, in dem man eine Funktion definiert, welche die Präfixe automatisch hinzufügt. Im folgendem verwende ich abgerundete Ecken für Bilder, Eingabefelder und Buttons:

border-radius()
    -webkit-border-radius arguments
    -moz-border-radius arguments
    border-radius arguments
img
    border-radius 12px
input
    border-radius 6px
button
    border-radius 4px

Wird dieser Code nun kompiliert, werden für die border-radius Anweisungen automatisch die Präfixe hinzugefügt:

img {
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}
input {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
button {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

Speziell für CSS3 gibt es die Funktions-Bibliothek nib, welche sämtlichen CSS3-Anweisungen mit Präfixen ausstattet. So muss man nicht für jede Anweisung eine eigene Funktion definieren.

Verwendung #

Soweit die wichtigsten Eigenschaften von Stylus. Es gibt verschiedene Möglichkeiten, Stylus zu verwenden. Eine dieser Möglichkeiten ist es, die kompilierung von Stylus zu CSS über Grunt zu automatisieren. Grunt ist ein auf Node.js basierender Task Runner und unterstützt Entwickler, in dem sich wiederholende Aufgaben automatisch ausgeführt werden. Grunt ist vor allem dann sinnvoll, wenn die Stylus Dateien später als statische CSS-Dateien vorliegen müssen. Außerdem können Dateien zusammengefasst (gebündelt) und minifiziert werden, wodurch in der finalen Website weniger Daten geladen werden müssen.

Wenn man eine Webanwendung mittels Node.js realisiert, kann man Stylus auch direkt in der Anwendung verwenden. Genaueres zu Stylus und wie man es in eine Node.js-Anwendung integriert, findet sich auf der offiziellen Website.

VN:F [1.9.22_1171]
Bewertung: 3.8/5 (4 Bewertungen)
Stylus – die Stylesheet-Sprache für Node.js, 3.8 out of 5 based on 4 ratings
Regelmäßige Beiträge über Node.js

nodecodeAbonniere den kostenlosen NodeCode-Newsletter, und bleibe auf dem laufenden über neue Beiträge zum Thema Node.js. Darunter:

  • Informationen und Neuigkeiten rund um Node.js und zugehörigen Modulen
  • Vorstellung von interessanten Frameworks und Bibliotheken
  • Anleitungen und Tutorials zu Node.js und weiterführenden Technologien
  • Sowie vieles mehr...

schon 3 Kommentare gehe zum kommentieren

  1. Leo Merkel /

    Hallo Alex,
    ich denke, Du kannst davon ausgehen, dass jemand, der einen solchen Artikel schreibt, sowohl Sass (schreibt sich übrigens nach dem S in Kleinbuchstaben), SCSS und LESS kennt.

    Wenn Du Dich intensiv mit dem Thema beschäftigst, dann erkennst Du vielleicht auch (wie viele professionelle Webdesigner), dass Sass bzw. SCSS aufgrund Ruby zu viele Ressourcen verbrauchen und das System darüber hinaus verlangsamt.

    Der Artikel, auf den NodeCode verweist, beschreibt das in der Tat sehr gut.

    Beste Grüße,
    Leo

  2. Alex Jank /

    Schon mal was von SCSS bzw. SASS gehört? – Immer diese Leute, die alles bestehende neu schreiben und revolutionieren wollen…

    1. NodeCode / Beitrags-Autor

      Hast du den Artikel gelesen? Dort erwähne ich nämlich unter anderem auch SASS. In sofern kann ich die Frage, ob ich schon mal was von SCSS bzw. SASS gehört habe, definitiv mit Ja beantworten.

      Dennoch verwenden ich Stylus anstelle von SASS, denn der Vorteil von Stylus ist, dass die Syntax minimaler, übersichtlicher und einfacher gehalten ist als bei SASS, man aber dennoch sehr viele Funktionalitäten hat. Gleichzeitig kann man aber auch optional geschweifte Klammern, Semikolons und Doppelpunkte verwenden (wie es bei der SCSS-Syntax oder bei LESS üblich ist), sofern man das möchte.

      Siehe dazu auch: Why I Choose Stylus (And You Should Too)

hinterlasse einen Kommentar