Getting started
CSS syntax
.box {
color: blue;
.button {
color: red;
}
}
Stylus is a CSS pre-processor.
See: stylus-lang.com
Indent syntax
.box
color: blue
.button
color: red
Also works! The colon is optional, as well. This is typically the syntax used with Stylus documents.
Mixins
caps-type()
text-transform: uppercase
letter-spacing: 0.05em
h5
caps-type()
See Mixins below.
Variables
royal-blue = #36a
div
color: royal-blue
Mixins
Without arguments
red-border()
border: solid 2px red
div
red-border()
See: Mixins
With arguments
border-radius(n)
-webkit-border-radius: n
border-radius: n
div
border-radius: 2px
border-radius(2px)
Mixins can be applied in two different ways.
Argument defaults
border-radius(n = 2px)
-webkit-border-radius: n
Block mixins
mobile()
@media (max-width: 480px)
{block}
+mobile()
width: 10px
See: Block mixins
Rest params
shadow(offset-x, args...)
box-shadow: offset-x args
margin-top: offset-x
#login
shadow: 1px 2px 5px #eee
See: Rest params
Functions
Functions
add(a, b)
a + b
body
padding: add(10px, 5)
See: Functions
Argument defaults
add(a, b = 2)
a + b
See: Argument defaults
Named parameters
shadow(x, y)
x y (y * 1.5) #000
.button
box-shadow: shadow(x: 2, y: 4)
See: Named parameters
Multiple return values
sizes()
8px 16px
sizes()[0] // → 8px
sizes()[1] // → 16px
Values
Conditional assignment
royal-blue = #36a
royal-blue ?= #89f
div
color: royal-blue // #36a
?= will only set a variable if it’s previously unset.
Property lookup
.logo
width: w = 150
margin-left: -(w / 2)
See: Property lookup
Interpolation
-{prefix}-border-radius: 2px
See: Interpolation
Color operators
#888 + 50% // → #c3c3c3 (lighten)
#888 - 50% // → #444 (darken)
#f00 + 50deg // → #ffd500 (hue)
Casting
n = 5px
foo: (n)em
foo: (n * 5)%
Lookup
light-blue = #3bd
name = 'blue'
lookup('light-' + name)
See: lookup
Advanced features
Conditional
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
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
if ohnoes is defined
color: blue
See: is defined
False values
0
null
false
''
Type check
if val is a 'string'
if val is a 'ident'
if #fff is a 'rgba' // → true
See: Instance check
Built-in functions
Color functions
alpha(#fff) //→ 1
alpha(rgba(0, 0, 0, 0.2)) //→ 0.2
dark(black) //→ true
light(black) //→ false
hue(#0a0) //→ 50deg
saturation(#f00) //→ 100%
lightness(#f00) //→ 50%
luminosity(#f00) //→ 0.2126
hue(#0a0, 0deg)
saturation(#f00, 50%)
lightness(#f00)
lighten(color, 10%)
darken(color, 10%)
saturate(color, 10%)
desaturate(color, 10%)
invert(color)
tint(color, 50%) // mix with white
shade(color, 50%) // mix with black
unquote(string)
See: Built-in functions
Image size
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
size($width)
+cache('w' + $width)
width: $width
.a { size: 10px }
.b { size: 10px }
// 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
gradient(color)
add-property('background-image', linear-gradient(top, color, darken(color, 20%)))
color
body
background: gradient(red)
See: add-property
sprintf
'-webkit-gradient(%s, %s, %s)' % (linear (0 0) (0 100%))
// → -webkit-gradient(linear, 0 0, 0 100%)
s("rgba(0, 0, 0, %s)", 0.3)
See: s
Embed URL
background: embedurl('logo.png')
// → background: url("data:image/png;base64,…")
See: embedurl