Stylus (Stylesheet-Sprache)

Stylus ist eine Stylesheet-Sprache mit dem Ziel, das Schreiben von CSS effizienter zu gestalten. Der Stylus-Quellcode wird serverseitig zu CSS kompiliert. Der Compiler ist in JavaScript für die Plattform Node.js geschrieben.

Die Syntax von Stylus ist minimal gehalten – geschweifte Klammern, Semikolons und Doppelpunkte werden nicht benötigt. Im Gegensatz zu den anderen Stylesheet-Sprachen SASS/SCSS und Less ist im Quellcode ein Unterschied zwischen CSS-Klassen und Mixins erkennbar.^[3]

Anstelle der für CSS typischen geschweiften Klammern verwendet Stylus Einrückungen, um die Eigenschaften dem Selektor zuzuordnen. Doppelpunkte und Semikolons sind optional.

body
font-size14px
background-colorwhite
colorblack

Dies wird zu folgendem CSS-Code kompiliert:

body{
font-size:14px;
background-color:white;
color:black;
}

Um Wiederholungen zu vermeiden, können in Stylus Variablen verwendet werden.

meineFarbe=#0033ff
header
background-colormeineFarbe
h1
colormeineFarbe
a
colormeineFarbe

Was kompiliert wird zu:

header{
background-color:#0033ff;
}
h1{
color:#0033ff;
}
a{
color:#0033ff;
}

Mit Mixins bzw. Funktionen müssen wiederholt-vorkommende Abläufe wie die Angabe unterschiedlicher Herstellerpräfixe nur einmal geschrieben werden.

Anmerkung: Das konkrete Beispiel mit -x-border-radius ist seit 2014 veraltet.^[4] Die Varianten mit Präfix sind seitdem wirkungslos.

border-radius()
-webkit-border-radiusarguments
-moz-border-radiusarguments
border-radiusarguments
#bild
border-radius8px
.button
border-radius3px

Das Ergebnis:

#bild{
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
}
.button{
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}

Hiermit können Selektoren ineinander verschachtelt werden.

#header
background-colorblue
h1
colorwhite
font-weightbold
p
font-size14px
#footer
backgroundgreen

wird kompiliert zu:

#header{
background-color:blue;
}
#headerh1{
color:white;
font-weight:bold;
}
#headerp{
font-size:14px;
}
#footer{
background:green;
}

Neben der Verwendung in Node.js existieren weitere Module, z. B. für Grunt^[5] oder für das Webframework Ruby on Rails.^[6]

• Sass (Stylesheet-Sprache)
• Less (Stylesheet-Sprache)

• Golo Roden: Node.js & Co. dpunkt.verlag, 2012, ISBN 978-3-89864-829-5.

• Offizielle Website
• Stylus – die Stylesheet-Sprache für Node.js
• Quellcode auf GitHub
• Node.js npm

1. ↑ Releases. In: GitHub. Abgerufen am 8. Mai 2016 (englisch). 
2. ↑ LICENSE. In: GitHub. Abgerufen am 13. Februar 2016 (englisch). 
3. ↑ Mixins. In: stylus-lang.com. Abgerufen am 13. Februar 2016 (englisch). 
4. ↑ Vergleiche Can I use... CSS3 Border-radius (rounded corners) oder ohne Zeitangabe direkt in den MDN Web Docs, siehe border-radius - browser compatibility.
5. ↑ grunt-contrib-stylus. In: GitHub. Abgerufen am 13. Februar 2016 (englisch). 
6. ↑ ruby-stylus. In: GitHub. Abgerufen am 13. Februar 2016 (englisch). 

• Cascading Style Sheets
• Stylesheet-Sprache
• Datenformat
• Node.js