Skip to content

参数们 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; }

共 20 个模块,1301 篇 Markdown 文档。