## Getting started

### CSS syntax

    .box {
      color: blue;

      .button {
        color: red;
      }
    }

Stylus is a CSS pre-processor.

See: stylus-lang.com

### Indent syntax

    .box
      color: blue

      .button
        color: red

Also works! The colon is optional, as well. This is typically the syntax used with Stylus documents.

### Mixins

    caps-type()
      text-transform: uppercase
      letter-spacing: 0.05em

    h5
      caps-type()

See Mixins below.

### Variables

    royal-blue = #36a

    div
      color: royal-blue

## Mixins

### Without arguments

    red-border()
      border: solid 2px red

    div
      red-border()

See: Mixins

### With arguments

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

    div
      border-radius: 2px
      border-radius(2px)

Mixins can be applied in two different ways.

### Argument defaults

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

### Block mixins

    mobile()
      @media (max-width: 480px)
        {block}

    +mobile()
      width: 10px

See: Block mixins

### Rest params

    shadow(offset-x, args...)
      box-shadow: offset-x args
      margin-top: offset-x

    #login
      shadow: 1px 2px 5px #eee

See: Rest params

## Functions

    add(a, b)
      a + b

    body
      padding: add(10px, 5)

See: Functions

### Argument defaults

    add(a, b = 2)
      a + b

See: Argument defaults

### Named parameters

    shadow(x, y)
      x y (y * 1.5) #000

    .button
      box-shadow: shadow(x: 2, y: 4)

See: Named parameters

### Multiple return values

    sizes()
      8px 16px

    sizes()[0]  // → 8px
    sizes()[1]  // → 16px

See: Multiple return values

## Values

### Conditional assignment

    royal-blue = #36a
    royal-blue ?= #89f

    div
      color: royal-blue  // #36a

`?=` will only set a variable if it’s previously unset.

See: Conditional assignment

### Property lookup

    .logo
      width: w = 150
      margin-left: -(w / 2)

See: Property lookup

### Interpolation

    -{prefix}-border-radius: 2px

See: Interpolation

### Color operators

    #888 + 50%    // → #c3c3c3 (lighten)
    #888 - 50%    // → #444 (darken)
    #f00 + 50deg  // → #ffd500 (hue)

### Casting

    n = 5px

    foo: (n)em
    foo: (n * 5)%

### Lookup

    light-blue = #3bd
    name = 'blue'
    lookup('light-' + name)

See: lookup

## Advanced features

### Conditional

    if color == blue
      display: block
    else if true and true
      display: inline
    else if 'hey' is not 'bye'
      display: flex
    else
      display: none

Aliases:

`==` | `is`
`!=` | `is not`
`!=` | `isnt`

See: Conditionals

### For loops

    font-size-1 = 10px
    font-size-2 = 20px
    font-size-3 = 30px

    for i in 1..3
      .text-{i}
        font-size: lookup('font-size-' + i)

### Definition check

    if ohnoes is defined
      color: blue

See: is defined

### False values

    0
    null
    false
    ''

### Type check

    if val is a 'string'
    if val is a 'ident'
    if #fff is a 'rgba'    // → true

See: Instance check

## Built-in functions

### Color functions

    alpha(#fff)   //→ 1
    alpha(rgba(0, 0, 0, 0.2))   //→ 0.2

    dark(black)  //→ true
    light(black) //→ false

    hue(#0a0)         //→ 50deg
    saturation(#f00)  //→ 100%
    lightness(#f00)   //→ 50%
    luminosity(#f00)  //→ 0.2126

    hue(#0a0, 0deg)
    saturation(#f00, 50%)
    lightness(#f00)

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

    tint(color, 50%)  // mix with white
    shade(color, 50%) // mix with black

    unquote(string)

See: Built-in functions

### Image size

    width:  image-size('tux.png')[0]
    height: image-size('tux.png')[1]

Returns the width and height of a given image.

See: image-size

### Caching

    size($width)
      +cache('w' + $width)
        width: $width
    .a { size: 10px }
    .b { size: 10px }

    // yields: .a, b { width: 10px }

Applies its contents to the given selector on the first call, but would @extend the first call’s selector at the second call with the same params.

See: cache

### Add Property

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

    body
      background: gradient(red)

See: add-property

### sprintf

    '-webkit-gradient(%s, %s, %s)' % (linear (0 0) (0 100%))
    // → -webkit-gradient(linear, 0 0, 0 100%)

    s("rgba(0, 0, 0, %s)", 0.3)

See: s

### Embed URL

    background: embedurl('logo.png')
    // → background: url("data:image/png;base64,…")

See: embedurl

0 Comments for this cheatsheet. Write yours!