Stylus Mixins and Functions

Mixins in Stylus

Stylus mixins are reusable blocks. Notably, you can call them without parentheses for a "transparent mixin" feel.

flex-center()
  display flex
  justify-content center
  align-items center

.box
  flex-center()   // or just: flex-center

Mixins with Arguments

button(bg, color = white)
  background bg
  color color
  padding 10px 20px

.primary
  button(#2563eb)

Functions (return values)

rem(px)
  return unit(px / 16, 'rem')

.title
  font-size rem(32)   // 2rem

Built-in Functions

lighten(#000, 20%)
darken(primary, 10%)
rgba(primary, 0.5)

FAQs

Mixin vs function in Stylus?

Mixins output CSS rules; functions return a value. More in our Stylus guides.

What are transparent mixins?

Mixins called without parentheses that blend into property syntax.