title: Stylus
----

### Variables

    royal-blue = #36a
    support-for-ie ?= true

    div
      color: royal-blue

### Mixin without args

    red-border()
      border: solid 2px red

    div
      red-border()

### Mixin with arguments

    border-radius(n)
      -webkit-border-radius: n
      border-radius: n

    div
      border-radius: 2px

Or with defaults:

    border-radius(n=2px)
      -webkit-border-radius: n

Multiple args:

    xy(left, top)
      left: left
      top: top

    div
      xy: 2px 2px

### Functions

    add(a, b)
      a + b

    body
      padding: add(10px, 5)

### Interpolation

    -{prefix}-border-radius: 2px

### Built-in functions

    alpha(#fff)   //=> 1
    alpha(rgba(0, 0, 0, 0.2))   //=> 0.2

    dark(black)  //=> true
    light(black) //=> false

    lighten(color, 10%)
    darken(color, 10%)
    saturate(color, 10%)
    invert(color)

    width:  image-size(img)[0]
    height: image-size(img)[1]

    unquote(string)

    s("rgba(0, 0, 0, %s)", 0.3)   // Works like eval?

Add Property:

    gradient(color)
      add-property('background-image', linear-gradient(top, color, darken(color, 20%)))
      color

    body
      background: gradient(red)