参数们 arguments变量可以实现表达式的精确传递,包括逗号等等。这可以弥补args...参数的一些不足,见下面的例子:
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; }
extend
这儿是个更复杂的例子,演示了__@extend__如何级联。 red = #E33E1E yellow = #E2E21E
.message padding: 10px font: 14px Helvetica border: 1px solid #eee
.warning @extends .message border-color: yellow background: yellow + 70%
.error @extends .message border-color: red background: red + 70%
.fatal @extends .error font-weight: bold color: red
编译后:
.message, .warning, .error, .fatal { padding: 10px font: 10px Helvetica; border: 1px solid #eee; } .warning { border-color: #e2e21e; background: #f6f6bc; } .error, .fatal { border-color: #e33e1e; background: #f7c5bc; } .fatal { font-weight: bold; color: #e33e1e; }
Stylus
Stylus中,只要选择器匹配,就可以生效:
form input[type=text] padding: 5px border: 1px solid #eee color: #ddd
textarea @extends form input[type=text] padding: 10px
编译后:
form input[type=text], textarea { padding: 5px; border: 1px solid #333; color: #ddd; }
textarea { padding: 10px; }
