Why Stylus fit better my needs

Stylus is an expressive, dynamic, robust CSS pre-processor built on top of Node.js. LESS and Sass are both great, they try to stay as close as the original CSS syntax as possible to minimize the impact of having to learn a new language, but for me someone who cares about simplicity and readability, the syntax becomes an important part of the language or the framework.

Installation

Ubuntu

$ sudo add-apt-repository ppa:chris-lea/node.js
$ sudo apt-get update
$ sudo apt-get install nodejs
$ sudo npm install -g stylus

Mac OSX

$ brew install node
$ curl https://npmjs.org/install.sh | sh
$ npm install -g stylus

For me as someone who comes from a Python world, Stylus syntax strips away all the colons, semicolons, brackets and most parentheses from regular CSS script, which become like a python syntax, easy and dead simple.

#container
    width 980px
    margin 0 auto
    background #ccc
    font 12px Helvetica, Arial, sans-serif

which produce the following CSS code

#container {
    width: 980px;
    margin: 0 auto;
    background: #ccc;
    font: 12px Helvetica, Arial, sans-serif;
}

Variables

Defining variables is simple, you don't need to use $ or @ like in Sass or LESS, the good part is that Stylus also support the $ so if you are coming from Sass your variables will remain functionnal.

font-size = 14px
color = #ff0000

body
    font-family  Arial, sans-serif
    font-size font-size
    color color

Once compiled, you'll get the following CSS code

body {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #f00;
}

Did you noticed something ? the color has been compressed automatically.

Mixins

Mixins are similar to functions, but used in a different way, a good example of a mixin is the border-radius property

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

#btn
    border-radius(3px) /* or just border-radius 3px */
    background #e9573f

The compiled version will be

#btn {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    background: #e9573f;
}

Handy for vendor-prefixed properties.

Iteration

Stylus gives you the ablity to iterate expressions via for/in

ul
    for row in 1 2 3 4 5
        li:nth-child({row})
            height: 10px * row

The CSS code will be

ul li:nth-child(1) {
    height: 10px;
}

ul li:nth-child(2) {
    height: 20px;
}

ul li:nth-child(3) {
    height: 30px;
}

ul li:nth-child(4) {
    height: 40px;
}

ul li:nth-child(5) {
    height: 50px;
}

Inheritance

Stylus provides a good inheritance mecanism

.notice
    padding 10px
    border 1px solid #eee

.warning
    @extend .notice
    color #e2e21e

.notice,
.warning {
    padding: 10px;
    border: 1px solid #eee;
}

.warning {
    color: #e2e21e;
}

Error Reporting

Stylus has fantastic error reporting built-in for syntax, parse, and evaluation errors—complete with stack traces, line numbers, and filenames.

.message
    padding 10px
    border 1px solid [#ccc]

The output will look something like this

$ stylus buggy-demo.styl

/usr/lib/node_modules/stylus/bin/stylus:530
              throw err;
                    ^
Error: t.styl:3
   1| .message
   2|     padding 10px
 > 3|     border 1px solid [#ccc]

cannot perform solid[(#ccc)]
    at ".message" (t.styl:NaN)
    at Ident.Node.operate (/usr/lib/node_modules/stylus/lib/nodes/node.js:189:13)

Stylus provides a detailed stack trace much like you would find in any decent language.

Literal CSS

This the best part of Stylus, you can still use your CSS code using @css and it will work, how that will help you in your workflow? you'll be able to integrate Stylus progressivly in your project

@css {
    body {
        font-family: Arial, sans-serif;
        font-size: 14px;
        color: #f00;
    }
}

#container
    width 980px
    margin 0 auto
    background #ccc
    font 12px Helvetica, Arial, sans-serif

the output will be

body {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #f00;
}

#container {
    width: 980px;
    margin: 0 auto;
    background: #ccc;
    font: 12px Helvetica, Arial, sans-serif;
}

Conclusion

Stylus is certainly worth a try, and if you are a Compass guy, Stylus has an extension called nib that provides robust cross-browser CSS3 mixins. Sure there is more you can learn about Stylus and there is docs for that.