stylus.md

   1 ---
   2 title: Stylus
   3 category: CSS
   4 layout: 2017/sheet
   5 prism_languages: [stylus]
   6 weight: -3
   7 updated: 2017-10-30
   8 tags: [Featurable]
   9 ---
  10
  11 Getting started
  12 ---------------
  13 {: .-three-column}
  14
  15 ### CSS syntax
  16
  17 ```stylus
  18 .box {
  19   color: blue;
  20
  21   .button {
  22     color: red;
  23   }
  24 }
  25 ```
  26
  27 Stylus is a CSS pre-processor.
  28
  29 See: [stylus-lang.com](http://stylus-lang.com/)
  30
  31 ### Indent syntax
  32
  33 ```stylus
  34 .box
  35   color: blue
  36
  37   .button
  38     color: red
  39 ```
  40
  41 Also works! The colon is optional, as well. This is typically the syntax used with Stylus documents.
  42
  43 ### Mixins
  44
  45 ```stylus
  46 caps-type()
  47   text-transform: uppercase
  48   letter-spacing: 0.05em
  49 ```
  50 {: data-line="1"}
  51
  52 ```stylus
  53 h5
  54   caps-type()
  55 ```
  56 {: data-line="2"}
  57
  58 See [Mixins](#mixins-1) below.
  59
  60 ### Variables
  61
  62 ```stylus
  63 royal-blue = #36a
  64 ```
  65 {: data-line="1"}
  66
  67 ```stylus
  68 div
  69   color: royal-blue
  70 ```
  71
  72 Mixins
  73 ------
  74 {: .-three-column}
  75
  76 ### Without arguments
  77
  78 ```stylus
  79 red-border()
  80   border: solid 2px red
  81 ```
  82 {: data-line="1"}
  83
  84 ```stylus
  85 div
  86   red-border()
  87 ```
  88 {: data-line="2"}
  89
  90 See: [Mixins](http://stylus-lang.com/docs/mixins.html)
  91
  92 ### With arguments
  93
  94 ```stylus
  95 border-radius(n)
  96   -webkit-border-radius: n
  97   border-radius: n
  98 ```
  99 {: data-line="1"}
 100
 101 ```stylus
 102 div
 103   border-radius: 2px
 104   border-radius(2px)
 105 ```
 106 {: data-line="2,3"}
 107
 108 Mixins can be applied in two different ways.
 109
 110 ### Argument defaults
 111
 112 ```stylus
 113 border-radius(n = 2px)
 114   -webkit-border-radius: n
 115 ```
 116 {: data-line="1"}
 117
 118 ### Block mixins
 119
 120 ```stylus
 121 mobile()
 122   @media (max-width: 480px)
 123     {block}
 124 ```
 125 {: data-line="3"}
 126
 127 ```stylus
 128 +mobile()
 129   width: 10px
 130 ```
 131 {: data-line="1"}
 132
 133 See: [Block mixins](http://stylus-lang.com/docs/mixins.html#block-mixins)
 134
 135 ### Rest params
 136
 137 ```stylus
 138 shadow(offset-x, args...)
 139   box-shadow: offset-x args
 140   margin-top: offset-x
 141 ```
 142 {: data-line="1"}
 143
 144 ```stylus
 145 #login
 146   shadow: 1px 2px 5px #eee
 147 ```
 148
 149 See: [Rest params](http://stylus-lang.com/docs/vargs.html)
 150
 151 Functions
 152 ---------
 153 {: .-three-column}
 154
 155 ### Functions
 156
 157 ```stylus
 158 add(a, b)
 159   a + b
 160 ```
 161 {: data-line="1"}
 162
 163 ```stylus
 164 body
 165   padding: add(10px, 5)
 166 ```
 167 {: data-line="2"}
 168
 169 See: [Functions](http://stylus-lang.com/docs/functions.html)
 170
 171 ### Argument defaults
 172
 173 ```stylus
 174 add(a, b = 2)
 175   a + b
 176 ```
 177 {: data-line="1"}
 178
 179 See: [Argument defaults](http://stylus-lang.com/docs/functions.html#argument-defaults)
 180
 181 ### Named parameters
 182
 183 ```stylus
 184 shadow(x, y)
 185   x y (y * 1.5) #000
 186 ```
 187
 188 ```stylus
 189 .button
 190   box-shadow: shadow(x: 2, y: 4)
 191 ```
 192 {: data-line="2"}
 193
 194 See: [Named parameters](http://stylus-lang.com/docs/functions.html#named-parameters)
 195
 196 ### Multiple return values
 197
 198 ```stylus
 199 sizes()
 200   8px 16px
 201 ```
 202 {: data-line="2"}
 203
 204 ```stylus
 205 sizes()[0]  // → 8px
 206 sizes()[1]  // → 16px
 207 ```
 208
 209 See: [Multiple return values](http://stylus-lang.com/docs/functions.html#multiple-return-values)
 210
 211 Values
 212 ------
 213 {: .-three-column}
 214
 215 ### Conditional assignment
 216
 217 ```stylus
 218 royal-blue = #36a
 219 royal-blue ?= #89f
 220 ```
 221 {: data-line="2"}
 222
 223 ```stylus
 224 div
 225   color: royal-blue  // #36a
 226 ```
 227
 228 `?=` will only set a variable if it's previously unset.
 229
 230 See: [Conditional assignment](http://stylus-lang.com/docs/operators.html#conditional-assignment--)
 231
 232 ### Property lookup
 233
 234 ```stylus
 235 .logo
 236   width: w = 150
 237   margin-left: -(w / 2)
 238 ```
 239 {: data-line="2,3"}
 240
 241 See: [Property lookup](http://stylus-lang.com/docs/variables.html#property-lookup)
 242
 243 ### Interpolation
 244
 245 ```stylus
 246 -{prefix}-border-radius: 2px
 247 ```
 248
 249 See: [Interpolation](http://stylus-lang.com/docs/interpolation.html)
 250
 251 ### Color operators
 252
 253 ```stylus
 254 #888 + 50%    // → #c3c3c3 (lighten)
 255 #888 - 50%    // → #444 (darken)
 256 #f00 + 50deg  // → #ffd500 (hue)
 257 ```
 258
 259 ### Casting
 260
 261 ```stylus
 262 n = 5px
 263 ```
 264
 265 ```stylus
 266 foo: (n)em
 267 foo: (n * 5)%
 268 ```
 269 {: data-line="1,2"}
 270
 271 ### Lookup
 272
 273 ```stylus
 274 light-blue = #3bd
 275 name = 'blue'
 276 lookup('light-' + name)
 277 ```
 278 {: data-line="3"}
 279
 280 See: [lookup](http://stylus-lang.com/docs/bifs.html#lookupname)
 281
 282 Advanced features
 283 -----------------
 284 {: .-three-column}
 285
 286 ### Conditional
 287
 288 ```stylus
 289 if color == blue
 290   display: block
 291 else if true and true
 292   display: inline
 293 else if 'hey' is not 'bye'
 294   display: flex
 295 else
 296   display: none
 297 ```
 298
 299 Aliases:
 300
 301
 302 | `==` | `is` |
 303 | `!=` | `is not` |
 304 | `!=` | `isnt` |
 305
 306 See: [Conditionals](http://stylus-lang.com/docs/functions.html#conditionals)
 307
 308 ### For loops
 309
 310 ```stylus
 311 font-size-1 = 10px
 312 font-size-2 = 20px
 313 font-size-3 = 30px
 314
 315 for i in 1..3
 316   .text-{i}
 317     font-size: lookup('font-size-' + i)
 318 ```
 319 {: data-line="5"}
 320
 321 ### Definition check
 322
 323 ```stylus
 324 if ohnoes is defined
 325   color: blue
 326 ```
 327 {: data-line="1"}
 328
 329 See: [is defined](http://stylus-lang.com/docs/operators.html#variable-definition-is-defined)
 330
 331 ### False values
 332
 333 ```stylus
 334 0
 335 null
 336 false
 337 ''
 338 ```
 339
 340 ### Type check
 341
 342 ```stylus
 343 if val is a 'string'
 344 if val is a 'ident'
 345 if #fff is a 'rgba'    // → true
 346 ```
 347
 348 See: [Instance check](http://stylus-lang.com/docs/operators.html#instance-check-is-a)
 349
 350 Built-in functions
 351 ------------------
 352 {: .-three-column}
 353
 354 ### Color functions
 355
 356 ```stylus
 357 alpha(#fff)   //→ 1
 358 alpha(rgba(0, 0, 0, 0.2))   //→ 0.2
 359 ```
 360
 361 ```stylus
 362 dark(black)  //→ true
 363 light(black) //→ false
 364 ```
 365
 366 ```stylus
 367 hue(#0a0)         //→ 50deg
 368 saturation(#f00)  //→ 100%
 369 lightness(#f00)   //→ 50%
 370 luminosity(#f00)  //→ 0.2126
 371 ```
 372
 373 ```stylus
 374 hue(#0a0, 0deg)
 375 saturation(#f00, 50%)
 376 lightness(#f00)
 377 ```
 378
 379 ```stylus
 380 lighten(color, 10%)
 381 darken(color, 10%)
 382 saturate(color, 10%)
 383 desaturate(color, 10%)
 384 invert(color)
 385 ```
 386
 387 ```stylus
 388 tint(color, 50%)  // mix with white
 389 shade(color, 50%) // mix with black
 390 ```
 391
 392 ```stylus
 393 unquote(string)
 394 ```
 395
 396 See: [Built-in functions](http://stylus-lang.com/docs/bifs.html)
 397
 398 ### Image size
 399
 400 ```stylus
 401 width:  image-size('tux.png')[0]
 402 height: image-size('tux.png')[1]
 403 ```
 404
 405 Returns the width and height of a given image.
 406
 407 See: [image-size](http://stylus-lang.com/docs/bifs.html#image-sizepath)
 408
 409 ### Caching
 410
 411 ```stylus
 412 size($width)
 413   +cache('w' + $width)
 414     width: $width
 415 .a { size: 10px }
 416 .b { size: 10px }
 417 ```
 418
 419 ```stylus
 420 // yields: .a, b { width: 10px }
 421 ```
 422
 423 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.
 424
 425 See: [cache](http://stylus-lang.com/docs/bifs.html#cachekeys)
 426
 427 ### Add Property
 428
 429 ```stylus
 430 gradient(color)
 431   add-property('background-image', linear-gradient(top, color, darken(color, 20%)))
 432   color
 433 ```
 434
 435 ```stylus
 436 body
 437   background: gradient(red)
 438 ```
 439
 440 See: [add-property](http://stylus-lang.com/docs/bifs.html#add-propertyname-expr)
 441
 442 ### sprintf
 443
 444 ```stylus
 445 '-webkit-gradient(%s, %s, %s)' % (linear (0 0) (0 100%))
 446 // → -webkit-gradient(linear, 0 0, 0 100%)
 447 ```
 448
 449 ```stylus
 450 s("rgba(0, 0, 0, %s)", 0.3)
 451 ```
 452
 453 See: [s](http://stylus-lang.com/docs/bifs.html#sfmt-)
 454
 455 ### Embed URL
 456
 457 ```
 458 background: embedurl('logo.png')
 459 // → background: url("data:image/png;base64,…")
 460 ```
 461
 462 See: [embedurl](http://stylus-lang.com/docs/bifs.html#embedurlpath-encoding)