Stylus obsługuje zarówno standardową składnię blokową CSS, jak i zwięzłą składnię wcięć bez dwukropków i średników.
Podstawy składni i zmienne
.box
color: blue
.button
color: red
// Variables & Conditional Assignment
royal-blue = #36a
royal-blue ?= #89f
div
color: royal-blue // Evaluates to #36a
Mixiny, bloki i parametry resztowe
// Mixin with 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
Funkcje i interpolacja
add(a, b = 2)
a + b
body
padding: add(10px, 5) // 15px
// Multiple Return Values
sizes()
8px 16px
sizes()[0] // 8px
// Interpolation
$icon-path = "/images"
.icon
background-image: url("%s/icon.png" % $icon-path)
.parent
&:hover
opacity: 0.8