Stylus (Stylesheet-Sprache)

Stylus
Basisdaten
Erscheinungsjahr: 2011
Entwickler: LearnBoost
Aktuelle Version: 0.54.5[1]  (28. April 2016)
Typisierung: Dynamisch
Beeinflusst von: CSS, Sass, Less
Betriebssystem: plattformübergreifend
Lizenz: MIT-Lizenz[2]
stylus-lang.com

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.

Syntax

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]

Codebeispiele

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-size 14px
  background-color white
  color black

Dies wird zu folgendem CSS-Code kompiliert: 

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

Variablen

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

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

Was kompiliert wird zu: 

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

Mixins

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-radius arguments
  -moz-border-radius arguments
  border-radius arguments
#bild
  border-radius 8px
.button
  border-radius 3px

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;
}

Geschachtelte Regeln

Hiermit können Selektoren ineinander verschachtelt werden. 

#header
  background-color blue
  h1
    color white
    font-weight bold
  p
    font-size 14px
#footer
  background green

wird kompiliert zu: 

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

Verwendung

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

Siehe auch

Literatur

Einzelnachweise

  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).