cheatsheets/stylus.md

---
title: Stylus
category: CSS
prism_languages: [stylus]
weight: -3
updated: 2017-10-30
tags: [Featurable]
---

Getting started
---------------
{: .-three-column}

### CSS syntax

```stylus
.box {
  color: blue;

  .button {
    color: red;
  }
}
```

Stylus is a CSS pre-processor.

See: [stylus-lang.com](http://stylus-lang.com/)

### Indent syntax

```stylus
.box
  color: blue

  .button
    color: red
```

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

### Mixins

```stylus
caps-type()
  text-transform: uppercase
  letter-spacing: 0.05em
```
{: data-line="1"}

```stylus
h5
  caps-type()
```
{: data-line="2"}

See [Mixins](#mixins-1) below.

### Variables

```stylus
royal-blue = #36a
```
{: data-line="1"}

```stylus
div
  color: royal-blue
```

Mixins
------
{: .-three-column}

### Without arguments

```stylus
red-border()
  border: solid 2px red
```
{: data-line="1"}

```stylus
div
  red-border()
```
{: data-line="2"}

See: [Mixins](http://stylus-lang.com/docs/mixins.html)

### With arguments

```stylus
border-radius(n)
  -webkit-border-radius: n
  border-radius: n
```
{: data-line="1"}

```stylus
div
  border-radius: 2px
  border-radius(2px)
```
{: data-line="2,3"}

Mixins can be applied in two different ways.

### Argument defaults

```stylus
border-radius(n = 2px)
  -webkit-border-radius: n
```
{: data-line="1"}

### Block mixins

```stylus
mobile()
  @media (max-width: 480px)
    {block}
```
{: data-line="3"}

```stylus
+mobile()
  width: 10px
```
{: data-line="1"}

See: [Block mixins](http://stylus-lang.com/docs/mixins.html#block-mixins)

### Rest params

```stylus
shadow(offset-x, args...)
  box-shadow: offset-x args
  margin-top: offset-x
```
{: data-line="1"}

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

See: [Rest params](http://stylus-lang.com/docs/vargs.html)

Functions
---------
{: .-three-column}

### Functions

```stylus
add(a, b)
  a + b
```
{: data-line="1"}

```stylus
body
  padding: add(10px, 5)
```
{: data-line="2"}

See: [Functions](http://stylus-lang.com/docs/functions.html)

### Argument defaults

```stylus
add(a, b = 2)
  a + b
```
{: data-line="1"}

See: [Argument defaults](http://stylus-lang.com/docs/functions.html#argument-defaults)

### Named parameters

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

```stylus
.button
  box-shadow: shadow(x: 2, y: 4)
```
{: data-line="2"}

See: [Named parameters](http://stylus-lang.com/docs/functions.html#named-parameters)

### Multiple return values

```stylus
sizes()
  8px 16px
```
{: data-line="2"}

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

See: [Multiple return values](http://stylus-lang.com/docs/functions.html#multiple-return-values)

Values
------
{: .-three-column}

### Conditional assignment

```stylus
royal-blue = #36a
royal-blue ?= #89f
```
{: data-line="2"}

```stylus
div
  color: royal-blue  // #36a
```

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

See: [Conditional assignment](https://stylus-lang.com/docs/operators.html#conditional-assignment--)

### Property lookup

```stylus
.logo
  width: w = 150
  margin-left: -(w / 2)
  // or
  height: 80px
  margin-top: -(@height / 2)
```
{: data-line="2,3"}

See: [Property lookup](https://stylus-lang.com/docs/variables.html#property-lookup)

### Interpolation

```stylus
-{prefix}-border-radius: 2px
```

See: [Interpolation](https://stylus-lang.com/docs/interpolation.html)

### Color operators

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

### Casting

```stylus
n = 5px
```

```stylus
foo: (n)em
foo: (n * 5)%
```
{: data-line="1,2"}

### Lookup

```stylus
light-blue = #3bd
name = 'blue'
lookup('light-' + name)
```
{: data-line="3"}

See: [lookup](https://stylus-lang.com/docs/bifs.html#lookupname)

Advanced features
-----------------
{: .-three-column}

### Conditional

```stylus
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](https://stylus-lang.com/docs/functions.html#conditionals)

### For loops

```stylus
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)
```
{: data-line="5"}

### Definition check

```stylus
if ohnoes is defined
  color: blue
```
{: data-line="1"}

See: [is defined](https://stylus-lang.com/docs/operators.html#variable-definition-is-defined)

### False values

```stylus
0
null
false
''
```

### Type check

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

See: [Instance check](https://stylus-lang.com/docs/operators.html#instance-check-is-a)

Built-in functions
------------------
{: .-three-column}

### Color functions

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

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

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

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

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

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

```stylus
unquote(string)
```

See: [Built-in functions](http://stylus-lang.com/docs/bifs.html)

### Image size

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

Returns the width and height of a given image.

See: [image-size](http://stylus-lang.com/docs/bifs.html#image-sizepath)

### Caching

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

```stylus
// 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](http://stylus-lang.com/docs/bifs.html#cachekeys)

### Add Property

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

```stylus
body
  background: gradient(red)
```

See: [add-property](http://stylus-lang.com/docs/bifs.html#add-propertyname-expr)

### sprintf

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

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

See: [s](http://stylus-lang.com/docs/bifs.html#sfmt-)

### Embed URL

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

See: [embedurl](http://stylus-lang.com/docs/bifs.html#embedurlpath-encoding)