Stylus

 

Stylus is a revolutionary new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.

Installation

$ npm install stylus

Example

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;
}

the following is equivalent to the indented version of Stylus source, using the CSS syntax instead:

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;
}

Features

Stylus has many features. Detailed documentation links follow:

• css syntax support
• mixins
• keyword arguments
• variables
• interpolation
• arithmetic, logical, and equality operators
• importing of other stylus sheets
• introspection api
• type coercion
• @extend
• conditionals
• iteration
• nested selectors
• parent reference
• in-language functions
• variable arguments
• built-in functions (over 25)
• optional image inlining
• optional compression
• JavaScript API
• extremely terse syntax
• stylus executable
• error reporting
• single-line and multi-line comments
• css literal
• character escaping
• @keyframes support & expansion
• @font-face support
• @media support
• Connect Middleware
• TextMate bundle
• Coda/SubEtha Edit Syntax mode
• gedit language-spec
• VIM Syntax
• Firebug extension
• heroku web service for compiling stylus
• style guide parser and generator
• transparent vendor-specific function expansion

Community modules

• https://github.com/LearnBoost/stylus/wiki

Framework Support

• Connect
• Play! 2.0
• Ruby On Rails
• Meteor

CMS Support

• DocPad
• Punch

Screencasts

• Stylus Intro
• CSS Syntax & Postfix Conditionals

Authors

• TJ Holowaychuk (visionmedia)

More Information

• Language comparisons

from https://github.com/learnboost/stylus