Stylus (style sheet language)

Unlike CSS, which uses braces to open and close declaration blocks, indentation is used. Additionally, semi-colons (;) are optionally omitted. Hence, the following CSS:

body {    color: white;}

can be shortened to:

body     color: white

Further, colons (:) and commas (,) are also optional; that means the above can be written as,

body     color white

Stylus allows variables to be defined, however unlike Less and Sass, it doesn't use a symbol to define variables. Additionally, variable assignment is done automatically by separating the property and keyword(s). In this way, variables are similar to the variables in Python.

message = 'Hello, World!'div::before  content message  color #ffffff

The Stylus compiler would translate the above document to:

div::before {  content: 'Hello, World!';  color: #ffffff;}

Both mixins and functions are defined in the same manner, but they are applied in different ways.

For example, if you wanted to define the CSS border radius property without having to use various Vendor Prefixes you can create:

border-radius(n)  -webkit-border-radius n  -moz-border-radius n  border-radius n

then, to include this as a mixin, you would reference it as:

div.rectangle   border-radius(10px)

this would compile to:

div.rectangle {  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  border-radius: 10px;}

To include variables in arguments and identifiers, brace characters surround the variable(s). For example,

 -webkit-{'border' + '-radius'}

evaluates to

-webkit-border-radius

• Official website
• Stylus source code repository (Git)
• Source code comparison with Sass/SCSS and Less
• Online Stylus compiler