剩余参数 #

¥Rest Params

Stylus 支持 name... 形式的剩余参数。这些参数消耗传递给 mixin 或函数的剩余参数。当利用（例如）隐式函数调用支持来应用浏览器前缀（例如 -webkit 或 -moz）时，这非常有用。

¥Stylus supports rest parameters in the form of name.... These params consume the remaining arguments passed to a mixin or function. This is useful when utilizing (for example) 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

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

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

¥If we wanted to peek at a specific argument—say, x-offset—we could simply use args[0]. Or, we may wish to redefine 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

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

#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 和函数体中，包含传递的确切表达式。由于多种原因（尤其是浏览器支持），当你获得精确的表达式、逗号等时，这很有用。

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

例如，如果我们使用剩余参数，则逗号将被消耗（因为它是表达式分隔符）：

¥For example, if we use a rest param, the comma is 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 

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

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

产生不希望的结果：

¥Yielding undesired 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;
}

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

¥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

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

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