Stylus预处理器简介(八)其余参数

其余参数(REST PARAMS)

Stylus支持name...形式的其余参数。这些参数可以消化传递给混写或函数的参数们。这在处理浏览器私有属性，如-moz或-webkit的时候很管用。

下面这个例子中，所有的参数们(1px, 2px, ...)都被一个args参数给简单消化了：

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

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

处理为:

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

我们想指定特定的参数，如x-offset，我们可以使用args[0], 或者，我们可能希望重新定义混合(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

处理为:

    #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）

arguments变量被注入到mixin和函数体中，包含传递的确切表达式。 当您获得exact表达式，逗号和所有内容时，这有几个原因（特别是供应商支持）很有用。

例如，如果我们使用rest param，则会使用逗号（因为它是表达式分隔符）：

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

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

产生不良结果：

  #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;
  }

让我们使用arguments重新定义mixin：

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

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

现在，产生预期的结果：

  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;
  }