Stylus (stylesheet language)
Stylus is written in Javascript and developed for the platform Node.js style sheet language, with the aim of writing CSS code more efficient. The Stylus source code is then compiled into CSS.
Syntax
The syntax of stylus is kept to a minimum - Curly braces, semicolons and colons are not needed. In contrast to the other style sheet languages SASS / SCSS and LESS a difference between CSS classes and mixins can be seen in the source code.
Code Examples
Instead of the typical CSS braces used stylus indentation for the properties assigned to the selector. Colons and semicolons are optional.
Body font-size 14px background-color white color black This is compiled into the following CSS code:
Body { font-size: 14px; background- color: white; color: black; } variables
To avoid repetition, variables can be used in the stylus.
Color = # 0033FF my header background-color my color h1 color my color a color my color What is compiled to:
Header { background-color: # 0033FF; } h1 { color: # 0033FF; } a { color: # 0033FF; } mixins
With mixins and functions repeatedly - occurring processes have to be written only once.
Border-radius () -webkit- border-radius arguments -moz- border-radius arguments border-radius arguments # picture border-radius 8px. button border-radius 3px The result:
# picture { -webkit- border-radius: 8px; -moz- border-radius: 8px; border-radius: 8px; }. { button -webkit- border-radius: 3px; -moz- border-radius: 3px; border-radius: 3px; } Nested rules
This can be nested inside each other selectors.
# header background-color blue h1 color white font-weight bold p font-size 14px # footer background green is compiled to:
# header { background- color: blue; } # header h1 { color: white; font-weight: bold; } # header p { font-size: 14px; } # footer { background: green; } use
Apart from using Node.js other modules, eg for Grunt or for the web framework Ruby on Rails exist.