As mentioned in an earlier post, we recently switched our development to another set of technologies. In the wake of this change, we wanted to change our css framework from Sass to Stylus.

Switching technologies is a tricky thing, especially if you have already a lot of code. We had rewritten our css framework - which internally is called "BRICKS" - from pure css to sass in order to use some features like mixins, variables, conditionals, etc. in late 2009. We started development of GRADETY based on this and have built a lot of sass files on top of that, which all would have to be changed again if we should decide to now opt for stylus. We did it anyway and - so far - it works great.

Stylus is an expressive, dynamic, robust css pre-processor developed by TJ Holowaychuck.

It is in many ways similar to Sass - which made the switch easy - but built specifically for node.js. By the time I'm writing this Stylus is at Version 0.12.2 and essentially supports everything we need right now. In addition there are some extensions and I'm looking forward to what TJ will come up with next.

Being a "Noob", here's what struck me as being most important:

1. You can omit the curly braces, colons and semicolons. So you can write...
   

   h1
     font-size 30px
     color #d3d3d3
     text-transform uppercase
    

2. Using mixins is a bit different from Sass...
   

   // define the mixin
   headline_mixin()
     font-size 30px
     color #d3d3d3
     text-transform uppercase
   // use the mixin
   .headline
     headline_mixin()
   

3. You can set defaults and pass multiple values to the mixin using the parenthesis...
   

   // define the mixin
   headline_mixin($siz=30px, $col=#d1d1d1)
     font-size $siz
     color $col
     text-transform uppercase
   // use the mixin
   .headline
     headline_mixin(24px, #d3d3d3)
   

4. Interpolation is now also available for selectors...
   

   // define the mixin
   create_headline($name=1, $siz=30px, $col=#d1d1d1)
     .headline-{$name}
       font-size $siz
       color $col
       text-transform uppercase
   // use the mixin
   create_headline('chapter', 24px, #d3d3d3)
   

5. You can compile and render a .styl file and it's imports to a given destination per request using the JavaScript API or connect middleware. Here's an example for JavaScript...
   

   var css = require('stylus')
     , fs = require('fs')
     , str = fs.readFileSync(__dirname + '/stylus/screen.styl', 'utf8');
   
   css.render(str, { filename:__dirname + '/stylus/screen.styl', compress:true},
   function(err,css){
     if (err) throw err;
     console.log(css);
     fs.writeFile( __dirname + '/css/screen.css', css, function (err){
     })
   });
   

6. Of course you also have variables, operators, functions, conditionals, iterations and many more available to you.

I admit, I am not the programmer among our small team but with a little help and feedback from Mathias and TJ, I managed to "translate" even the more complicated functions, conditionals and iterations to stylus.

Thank you TJ!

You can read more about stylus at the changelog and if you are more into screencasts, you can watch one at screenr. If you are interested in the latest build or documentation, you should check out the stylus repository at github and it can also never hurt to pay a visit to TJ Holowaychucks blog.

If I can do it, you can do it! So, what's your experience with Stylus?