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](https://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   // or
 239   height: 80px
 240   margin-top: -(@height / 2)
 241 ```
 242 {: data-line="2,3"}
 243
 244 See: [Property lookup](https://stylus-lang.com/docs/variables.html#property-lookup)
 245
 246 ### Interpolation
 247
 248 ```stylus
 249 -{prefix}-border-radius: 2px
 250 ```
 251
 252 See: [Interpolation](https://stylus-lang.com/docs/interpolation.html)
 253
 254 ### Color operators
 255
 256 ```stylus
 257 #888 + 50%    // → #c3c3c3 (lighten)
 258 #888 - 50%    // → #444 (darken)
 259 #f00 + 50deg  // → #ffd500 (hue)
 260 ```
 261
 262 ### Casting
 263
 264 ```stylus
 265 n = 5px
 266 ```
 267
 268 ```stylus
 269 foo: (n)em
 270 foo: (n * 5)%
 271 ```
 272 {: data-line="1,2"}
 273
 274 ### Lookup
 275
 276 ```stylus
 277 light-blue = #3bd
 278 name = 'blue'
 279 lookup('light-' + name)
 280 ```
 281 {: data-line="3"}
 282
 283 See: [lookup](https://stylus-lang.com/docs/bifs.html#lookupname)
 284
 285 Advanced features
 286 -----------------
 287 {: .-three-column}
 288
 289 ### Conditional
 290
 291 ```stylus
 292 if color == blue
 293   display: block
 294 else if true and true
 295   display: inline
 296 else if 'hey' is not 'bye'
 297   display: flex
 298 else
 299   display: none
 300 ```
 301
 302 Aliases:
 303
 304
 305 | `==` | `is` |
 306 | `!=` | `is not` |
 307 | `!=` | `isnt` |
 308
 309 See: [Conditionals](https://stylus-lang.com/docs/functions.html#conditionals)
 310
 311 ### For loops
 312
 313 ```stylus
 314 font-size-1 = 10px
 315 font-size-2 = 20px
 316 font-size-3 = 30px
 317
 318 for i in 1..3
 319   .text-{i}
 320     font-size: lookup('font-size-' + i)
 321 ```
 322 {: data-line="5"}
 323
 324 ### Definition check
 325
 326 ```stylus
 327 if ohnoes is defined
 328   color: blue
 329 ```
 330 {: data-line="1"}
 331
 332 See: [is defined](https://stylus-lang.com/docs/operators.html#variable-definition-is-defined)
 333
 334 ### False values
 335
 336 ```stylus
 337 0
 338 null
 339 false
 340 ''
 341 ```
 342
 343 ### Type check
 344
 345 ```stylus
 346 if val is a 'string'
 347 if val is a 'ident'
 348 if #fff is a 'rgba'    // → true
 349 ```
 350
 351 See: [Instance check](https://stylus-lang.com/docs/operators.html#instance-check-is-a)
 352
 353 Built-in functions
 354 ------------------
 355 {: .-three-column}
 356
 357 ### Color functions
 358
 359 ```stylus
 360 alpha(#fff)   //→ 1
 361 alpha(rgba(0, 0, 0, 0.2))   //→ 0.2
 362 ```
 363
 364 ```stylus
 365 dark(black)  //→ true
 366 light(black) //→ false
 367 ```
 368
 369 ```stylus
 370 hue(#0a0)         //→ 50deg
 371 saturation(#f00)  //→ 100%
 372 lightness(#f00)   //→ 50%
 373 luminosity(#f00)  //→ 0.2126
 374 ```
 375
 376 ```stylus
 377 hue(#0a0, 0deg)
 378 saturation(#f00, 50%)
 379 lightness(#f00)
 380 ```
 381
 382 ```stylus
 383 lighten(color, 10%)
 384 darken(color, 10%)
 385 saturate(color, 10%)
 386 desaturate(color, 10%)
 387 invert(color)
 388 ```
 389
 390 ```stylus
 391 tint(color, 50%)  // mix with white
 392 shade(color, 50%) // mix with black
 393 ```
 394
 395 ```stylus
 396 unquote(string)
 397 ```
 398
 399 See: [Built-in functions](http://stylus-lang.com/docs/bifs.html)
 400
 401 ### Image size
 402
 403 ```stylus
 404 width:  image-size('tux.png')[0]
 405 height: image-size('tux.png')[1]
 406 ```
 407
 408 Returns the width and height of a given image.
 409
 410 See: [image-size](http://stylus-lang.com/docs/bifs.html#image-sizepath)
 411
 412 ### Caching
 413
 414 ```stylus
 415 size($width)
 416   +cache('w' + $width)
 417     width: $width
 418 .a { size: 10px }
 419 .b { size: 10px }
 420 ```
 421
 422 ```stylus
 423 // yields: .a, b { width: 10px }
 424 ```
 425
 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.
 427
 428 See: [cache](http://stylus-lang.com/docs/bifs.html#cachekeys)
 429
 430 ### Add Property
 431
 432 ```stylus
 433 gradient(color)
 434   add-property('background-image', linear-gradient(top, color, darken(color, 20%)))
 435   color
 436 ```
 437
 438 ```stylus
 439 body
 440   background: gradient(red)
 441 ```
 442
 443 See: [add-property](http://stylus-lang.com/docs/bifs.html#add-propertyname-expr)
 444
 445 ### sprintf
 446
 447 ```stylus
 448 '-webkit-gradient(%s, %s, %s)' % (linear (0 0) (0 100%))
 449 // → -webkit-gradient(linear, 0 0, 0 100%)
 450 ```
 451
 452 ```stylus
 453 s("rgba(0, 0, 0, %s)", 0.3)
 454 ```
 455
 456 See: [s](http://stylus-lang.com/docs/bifs.html#sfmt-)
 457
 458 ### Embed URL
 459
 460 ```
 461 background: embedurl('logo.png')
 462 // → background: url("data:image/png;base64,…")
 463 ```
 464
 465 See: [embedurl](http://stylus-lang.com/docs/bifs.html#embedurlpath-encoding)