Stylus


What is Stylus

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

Pre-processors

  • 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

Benefits

  • 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 - http://nodejs.org
  • 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")

Syntax

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

GO forth


Stylus

By Matt Null