Stylus

CSS
Featurable

Getting started

CSS syntax

1
2
3
4
5
6
7
.box {
  color: blue;

  .button {
    color: red;
  }
}

Stylus is a CSS pre-processor.

See: stylus-lang.com

Indent syntax

1
2
3
4
5
.box
  color: blue

  .button
    color: red

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

Mixins

1
2
3
caps-type()
  text-transform: uppercase
  letter-spacing: 0.05em
1
2
h5
  caps-type()

See Mixins below.

Variables

1
royal-blue = #36a
1
2
div
  color: royal-blue

Mixins

Without arguments

1
2
red-border()
  border: solid 2px red
1
2
div
  red-border()

See: Mixins

With arguments

1
2
3
border-radius(n)
  -webkit-border-radius: n
  border-radius: n
1
2
3
div
  border-radius: 2px
  border-radius(2px)

Mixins can be applied in two different ways.

Argument defaults

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

Block mixins

1
2
3
mobile()
  @media (max-width: 480px)
    {block}
1
2
+mobile()
  width: 10px

See: Block mixins

Rest params

1
2
3
shadow(offset-x, args...)
  box-shadow: offset-x args
  margin-top: offset-x
1
2
#login
  shadow: 1px 2px 5px #eee

See: Rest params

Functions

Functions

1
2
add(a, b)
  a + b
1
2
body
  padding: add(10px, 5)

See: Functions

Argument defaults

1
2
add(a, b = 2)
  a + b

See: Argument defaults

Named parameters

1
2
shadow(x, y)
  x y (y * 1.5) #000
1
2
.button
  box-shadow: shadow(x: 2, y: 4)

See: Named parameters

Multiple return values

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

See: Multiple return values

Values

Conditional assignment

1
2
royal-blue = #36a
royal-blue ?= #89f
1
2
div
  color: royal-blue  // #36a

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

See: Conditional assignment

Property lookup

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

See: Property lookup

Interpolation

1
-{prefix}-border-radius: 2px

See: Interpolation

Color operators

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

Casting

1
n = 5px
1
2
foo: (n)em
foo: (n * 5)%

Lookup

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

See: lookup

Advanced features

Conditional

1
2
3
4
5
6
7
8
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

1
2
3
4
5
6
7
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

1
2
if ohnoes is defined
  color: blue

See: is defined

False values

1
2
3
4
0
null
false
''

Type check

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

See: Instance check

Built-in functions

Color functions

1
2
alpha(#fff)   //→ 1
alpha(rgba(0, 0, 0, 0.2))   //→ 0.2
1
2
dark(black)  //→ true
light(black) //→ false
1
2
3
4
hue(#0a0)         //→ 50deg
saturation(#f00)  //→ 100%
lightness(#f00)   //→ 50%
luminosity(#f00)  //→ 0.2126
1
2
3
hue(#0a0, 0deg)
saturation(#f00, 50%)
lightness(#f00)
1
2
3
4
5
lighten(color, 10%)
darken(color, 10%)
saturate(color, 10%)
desaturate(color, 10%)
invert(color)
1
2
tint(color, 50%)  // mix with white
shade(color, 50%) // mix with black
1
unquote(string)

See: Built-in functions

Image size

1
2
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

1
2
3
4
5
size($width)
  +cache('w' + $width)
    width: $width
.a { size: 10px }
.b { size: 10px }
1
// 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

1
2
3
gradient(color)
  add-property('background-image', linear-gradient(top, color, darken(color, 20%)))
  color
1
2
body
  background: gradient(red)

See: add-property

sprintf

1
2
'-webkit-gradient(%s, %s, %s)' % (linear (0 0) (0 100%))
// → -webkit-gradient(linear, 0 0, 0 100%)
1
s("rgba(0, 0, 0, %s)", 0.3)

See: s

Embed URL

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

See: embedurl