Syntax Basics
Stylus supports both standard CSS block syntax and Python-like indentation syntax without colons or semicolons.
Indented Syntax
.box
color: blue
.button
color: red
Variables
royal-blue = #36a
div
color: royal-blue
Conditional Assignment
royal-blue = #36a
royal-blue ?= #89f
div
color: royal-blue // Evaluates to #36a
Mixins
Simple Mixin
red-border()
border: solid 2px red
div
red-border()
Mixin with Arguments and Defaults
border-radius(n = 2px)
-webkit-border-radius: n
border-radius: n
div
border-radius(4px)
Block Mixins
mobile()
@media (max-width: 480px)
{block}
+mobile()
width: 100%
Rest Parameters
shadow(offset-x, args...)
box-shadow: offset-x args
#login
shadow: 1px 2px 5px #eee
Functions
Defining Functions
add(a, b = 2)
a + b
body
padding: add(10px, 5) // 15px
Multiple Return Values
sizes()
8px 16px
sizes()[0] // 8px
sizes()[1] // 16px
Interpolation and Selectors
$icon-path = "/images"
.icon
background-image: url("%s/icon.png" % $icon-path)
.parent
&:hover
opacity: 0.8