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

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