5 prism_languages: [stylus]
27 Stylus is a CSS pre-processor.
29 See: [stylus-lang.com](http://stylus-lang.com/)
41 Also works! The colon is optional, as well. This is typically the syntax used with Stylus documents.
47 text-transform: uppercase
48 letter-spacing: 0.05em
58 See [Mixins](#mixins-1) below.
90 See: [Mixins](http://stylus-lang.com/docs/mixins.html)
96 -webkit-border-radius: n
108 Mixins can be applied in two different ways.
110 ### Argument defaults
113 border-radius(n = 2px)
114 -webkit-border-radius: n
122 @media (max-width: 480px)
133 See: [Block mixins](http://stylus-lang.com/docs/mixins.html#block-mixins)
138 shadow(offset-x, args...)
139 box-shadow: offset-x args
146 shadow: 1px 2px 5px #eee
149 See: [Rest params](http://stylus-lang.com/docs/vargs.html)
165 padding: add(10px, 5)
169 See: [Functions](http://stylus-lang.com/docs/functions.html)
171 ### Argument defaults
179 See: [Argument defaults](http://stylus-lang.com/docs/functions.html#argument-defaults)
190 box-shadow: shadow(x: 2, y: 4)
194 See: [Named parameters](http://stylus-lang.com/docs/functions.html#named-parameters)
196 ### Multiple return values
209 See: [Multiple return values](http://stylus-lang.com/docs/functions.html#multiple-return-values)
215 ### Conditional assignment
225 color: royal-blue // #36a
228 `?=` will only set a variable if it's previously unset.
230 See: [Conditional assignment](https://stylus-lang.com/docs/operators.html#conditional-assignment--)
237 margin-left: -(w / 2)
240 margin-top: -(@height / 2)
244 See: [Property lookup](https://stylus-lang.com/docs/variables.html#property-lookup)
249 -{prefix}-border-radius: 2px
252 See: [Interpolation](https://stylus-lang.com/docs/interpolation.html)
257 #888 + 50% // → #c3c3c3 (lighten)
258 #888 - 50% // → #444 (darken)
259 #f00 + 50deg // → #ffd500 (hue)
279 lookup('light-' + name)
283 See: [lookup](https://stylus-lang.com/docs/bifs.html#lookupname)
294 else if true and true
296 else if 'hey' is not 'bye'
309 See: [Conditionals](https://stylus-lang.com/docs/functions.html#conditionals)
320 font-size: lookup('font-size-' + i)
332 See: [is defined](https://stylus-lang.com/docs/operators.html#variable-definition-is-defined)
348 if #fff is a 'rgba' // → true
351 See: [Instance check](https://stylus-lang.com/docs/operators.html#instance-check-is-a)
361 alpha(rgba(0, 0, 0, 0.2)) //→ 0.2
366 light(black) //→ false
371 saturation(#f00) //→ 100%
372 lightness(#f00) //→ 50%
373 luminosity(#f00) //→ 0.2126
378 saturation(#f00, 50%)
386 desaturate(color, 10%)
391 tint(color, 50%) // mix with white
392 shade(color, 50%) // mix with black
399 See: [Built-in functions](http://stylus-lang.com/docs/bifs.html)
404 width: image-size('tux.png')[0]
405 height: image-size('tux.png')[1]
408 Returns the width and height of a given image.
410 See: [image-size](http://stylus-lang.com/docs/bifs.html#image-sizepath)
423 // yields: .a, b { width: 10px }
426 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.
428 See: [cache](http://stylus-lang.com/docs/bifs.html#cachekeys)
434 add-property('background-image', linear-gradient(top, color, darken(color, 20%)))
440 background: gradient(red)
443 See: [add-property](http://stylus-lang.com/docs/bifs.html#add-propertyname-expr)
448 '-webkit-gradient(%s, %s, %s)' % (linear (0 0) (0 100%))
449 // → -webkit-gradient(linear, 0 0, 0 100%)
453 s("rgba(0, 0, 0, %s)", 0.3)
456 See: [s](http://stylus-lang.com/docs/bifs.html#sfmt-)
461 background: embedurl('logo.png')
462 // → background: url("data:image/png;base64,…")
465 See: [embedurl](http://stylus-lang.com/docs/bifs.html#embedurlpath-encoding)