What is Stylus

  • Stylus is a CSS pre-processor for Node.js
  • Similar pre-processors include LESS and SASS


  • Definitiona computer program that modifies data to conform with the input requirements of another program.
  • Different pre-processors
    • HTML - HAML, Markdown
    • CSS - Stylus, LESS, SASS
    • JS - CoffeeScript, RedScript


  • Helps you write code faster
  • Removes inefficiencies (makes you code better, you don't repeat yourself)
  • It's easy to write

Getting started

  • Require Node.js -
  • Installs via NPM 
    • run `npm install -g stylus`
  • Compiling  + Watching 
    • run `stylus -o lib -w src` (this watches a directory called "src" and places the compiled CSS in a folder called "lib")


  • {} not required
  • : not required
  • ; not required
  • nested code is tabbed
  • functions - reusable bits of css

GO forth


By Matt Null

Loading comments...

More from Matt Null