stylus: Expressive, robust, feature-rich CSS language built for Node.js

This isn’t the first time we’ve covered the latest fresh and new creation from LearnBoost.

Stylus is an expressive, dynamic, robust CSS pre-processor for Node.js. If you are familiar with Sass.js, Sass or Less.js … Stylus is kind of similar, but from what we’ve heard from TJ Holowaychuk they’ve taken it pretty far in a new direction.

At first glance, Stylus looks a lot like it’s counterparts, Sass and Less, but has been built specifically for Node.js. If you like Jade’s syntax over Haml, you need to take a look at Stylus instead of Sass in your Node projects.

Stylus has all the same features that you’d see in Sass/Less such as Arithmetic, Mixins, Variables, but adds a few new innovative features to the CSS pre-processor ecosystem. The feature list is long, so check out the project’s Readme to take a peek for yourself.

Just like Jade is to Haml in getting rid of the extras left behind, Stylus goes even further to not only get rid of the braces and semi-colons, but also the colons as well.

For example:

body
  font 12px Helvetica, Arial, sans-serif

Installation

Assuming you’ve got Node.js and npm installed …

$ npm install stylus

TextMate Bundle

Stylus ships with a TextMate bundle, located within ./editors. To install simply execute make install-bundle, or place ./editors/Stylus.tmbundle in the appropriate location.

Example

Check out the codes below or dive into this implementation comparison where Stylus goes head to head with other CSS Pre-processor implementations. You can also check out the docs to get a deeper look at features like: conditionals, @font-face, interpolation and @key-frames.

This code …

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments

body a
  font 12px/1.4 "Lucida Grande", Arial, sans-serif
  background black
  color #ccc

form input
  padding 5px
  border 1px solid
  border-radius 5px

… compiles to …

body a {
  font: 12px/1.4 "Lucida Grande", Arial, sans-serif;
  background: #000;
  color: #ccc;
}
form input {
  padding: 5px;
  border: 1px solid;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Video

Thanks to TJ for this great into video on Screenr.

[Source on GitHub] [Homepage]