Cool CSS with Stylus

Is a couple of years that I'm looking for a new language to write my css. Since I'm a rubyist and an haml lover I've tried sass but wasn't love, no really know know why, the only thing that I can admit is that I don't love the syntax.

I've tried also others popular (in the ruby world) languages like less.

Finally looking in the new cool node.js land I discovered stylus.

My right choice!

To use it you must install node.js, to do that is pretty simple, if you have not already installed brew do it:

$ ruby -e "$(curl -fsSL"

then you must install node.js, could take a while:

$ brew install node

now we need to install a package manager, like gem but for node: npm

$ curl | sh

We need also to set properly the $NODE_PATH without that node seems not able to know our modules:

$ vim ~/.bash_profile
# add this:
export NODE_PATH="/usr/local/lib/node_modules"
$ . ~/.bash_profile

Now we can install stylus:

$ npm install -g stylus

And we need to start a watcher that convert styl to css file on the fly.

$ cd your_project
$ stylus -w public/stylesheets/*.styl -c

Now you can create your file.styl which will be converted into file.css

If you want to convert your existing files to stylus run:

$ stylus -C public/stylesheets/foo.css
# or
$ stylus -C public/stylesheets/*.css

I suggest you to read the cool documentation for more information usage.