Skip to content
This repository
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 85 lines (58 sloc) 2.484 kb

Rest Parameters

Stylus supports rest parameters in the form of name.... These params consume the remaining arguments passed to a mixin or function. This is useful for example when utilizing the implicit function call support to apply vendor prefixes like -webkit or -moz.

In the example below we consume all the arguments passed and simply apply them to multiple properties.

 box-shadow(args...)
   -webkit-box-shadow args
   -moz-box-shadow args
   box-shadow args

 #login
   box-shadow 1px 2px 5px #eee

yielding:

  #login {
    -webkit-box-shadow: 1px 2px 5px #eee;
    -moz-box-shadow: 1px 2px 5px #eee;
    box-shadow: 1px 2px 5px #eee;
  }

If we wanted to peek at a specific argument, for example the x-offset we could simply use args[0], or for example we may wish to re-define the mixin:

    box-shadow(offset-x, args...)
      got-offset-x offset-x
      -webkit-box-shadow offset-x args
      -moz-box-shadow offset-x args
      box-shadow offset-x args

    #login
      box-shadow 1px 2px 5px #eee

yielding:

    #login {
      got-offset-x: 1px;
      -webkit-box-shadow: 1px 2px 5px #eee;
      -moz-box-shadow: 1px 2px 5px #eee;
      box-shadow: 1px 2px 5px #eee;
    }

arguments

The arguments variable is injected into mixin and function bodies, containing the exact expression passed. This is useful for several reasons, primarily for vendor support, as you get the exact expression, commas and all.

For example, if we use a rest param, the comma is simply consumed since it is an expression delimiter:

  box-shadow(args...)
    -webkit-box-shadow args
    -moz-box-shadow args
    box-shadow args

  #login
    box-shadow #ddd 1px 1px, #eee 2px 2px 

yielding slightly unexpected results:

  #login {
    -webkit-box-shadow: #ddd 1px 1px #eee 2px 2px;
    -moz-box-shadow: #ddd 1px 1px #eee 2px 2px;
    box-shadow: #ddd 1px 1px #eee 2px 2px;
  }

Let's redefine the mixin using arguments:

  box-shadow()
    -webkit-box-shadow arguments
    -moz-box-shadow arguments
    box-shadow arguments

  body
    box-shadow #ddd 1px 1px, #eee 2px 2px

now yielding the desired result:

  body {
    -webkit-box-shadow: #ddd 1px 1px, #eee 2px 2px;
    -moz-box-shadow: #ddd 1px 1px, #eee 2px 2px;
    box-shadow: #ddd 1px 1px, #eee 2px 2px;
  }
Something went wrong with that request. Please try again.