Stylus-Befehle: flexibler CSS-Präprozessor kompakt erklärt

Stylus ist ein CSS-Präprozessor für Node.js, den TJ Holowaychuk ab 2011 entwickelte – derselbe Entwickler, der auch die Template-Engine Pug (früher Jade) schuf. Stylus basiert auf den Ideen von Sass und Less, geht aber beim Weglassen von Syntaxzeichen am weitesten.

Sehr flexible Syntax

Klammern, Doppelpunkte und Semikolons sind in Stylus optional. Die Einrückung bestimmt die Verschachtelung, wie bei Python oder der klassischen SASS-Syntax:

primary = #2563eb
.nav
  color primary
  a
    text-decoration none

Die wichtigsten Stylus-Befehle

• Variablen ohne Präfix: primary = #2563eb, Zugriff als primary
• Mixins als Funktionen: border-radius(n) mit border-radius: n px
• Eigenschafts-Interpolation: {prop}: wert – Eigenschaftsnamen dynamisch setzen
• Kontrollfluss: if/else if/else, for ... in, unless
• Transparente Mixins und @extend für Vererbung

Kompilieren

npm install stylus
stylus styles.styl styles.css

Stylus war vor allem in der Express-Community verbreitet, ist heute aber deutlich seltener als Sass oder Less. Die stabile Version 0.54.8 erschien 2020, die Entwicklung ist weitgehend eingeschlafen.

Grundlagen: HTML- und CSS-Befehle. Verwandt: Sass-Befehle und Pug-Befehle vom selben Entwickler.