Stylus (Stylesheet-Sprache)

aus Wikipedia, der freien Enzyklopädie
Wechseln zu: Navigation, Suche
Stylus
Stylus.svg
Basisdaten
Erscheinungsjahr: 2011
Entwickler: LearnBoost
Aktuelle Version: 0.42.2 [1]  (30. Januar 2014)
Typisierung: Dynamisch
Beeinflusst von: CSS, Sass, LESS
Beeinflusste: nib [2]
Betriebssystem: plattformübergreifend
Lizenz: MIT-Lizenz [3]
learnboost.github.io/stylus

Stylus ist eine in Javascript geschriebene und für die Plattform Node.js entwickelte Stylesheet-Sprache, mit dem Ziel, das schreiben von CSS-Code effizienter zu gestalten. Der in Stylus geschriebene Quellcode wird anschließend serverseitig in CSS kompiliert.

Syntax[Bearbeiten]

Die Syntax von Stylus ist minimal gehalten – Geschweifte Klammern, Semikola 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.[4]

Codebeispiele[Bearbeiten]

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 folgenden CSS-Code kompiliert:

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

Variablen[Bearbeiten]

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[Bearbeiten]

Mit Mixins bzw. Funktionen müssen wiederholt-vorkommende Abläufe nur einmal geschrieben werden.

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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

Weblinks[Bearbeiten]

Literatur[Bearbeiten]

  • Golo Roden: Node.js & Co. dpunkt.verlag, 2012, 978-3898648295

Einzelnachweise[Bearbeiten]

  1. https://github.com/LearnBoost/stylus/releases
  2. http://visionmedia.github.io/nib/
  3. https://github.com/LearnBoost/stylus/blob/master/LICENSE
  4. http://learnboost.github.io/stylus/docs/mixins.html
  5. https://github.com/gruntjs/grunt-contrib-stylus
  6. https://github.com/lucasmazza/ruby-stylus