英语
外观
Stylus 支持 name... 形式的剩余参数。这些参数会使用传递给混合或函数的剩余参数。这在使用(例如)隐式函数调用支持来应用供应商前缀(如 -webkit 或 -moz)时非常有用。
name...
-webkit
-moz
在下面的示例中,我们使用所有传递的参数,并简单地将它们应用于多个属性。
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]。或者,我们可能希望重新定义混合
x-offset
args[0]
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
例如,如果我们使用剩余参数,则会使用逗号(因为它是一个表达式分隔符)
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 重新定义混合
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; }