Java|如何写一份不错的CSS代码？( 二 )

CSS预处理器在预处理器中，同样提供了众多的方法来简化与控制CSS代码，以stylus为例
1. 变量font-size = 14px body font font-size Arial sans-serif pad(types = padding n = 5px) if padding in types padding n if margin in types margin nbody pad()body pad(margin)body pad(padding margin 10px) // Yields：body { padding: 5px;body { margin: 5px;body { padding: 10px; margin: 10px;

2. 函数add(a b = a) a + b add(10 5) // => 15 get(hash key) return pair[1
if pair[0
== key for pair in hash hash = (one 1) (two 2) (three 3) get(hash two) // => 2 get(hash three) // => 3 get(hash something) // => null

3. 内建函数// 提取颜色分量red(#c00)// => 204red(#000 255)// => #f00

4. 插值// 属性插值vendor(prop args) -webkit-{prop args -moz-{prop args {prop argsborder-radius() vendor('border-radius' arguments)box-shadow() vendor('box-shadow' arguments)button border-radius 1px 2px / 3px 4px // Yields: button { -webkit-border-radius: 1px 2px / 3px 4px; -moz-border-radius: 1px 2px / 3px 4px; border-radius: 1px 2px / 3px 4px; // 选择器插值 table for row in 1 2 3 4 5 tr:nth-child({row) height: 10px * row // Yields: table tr:nth-child(1) { height: 10px;table tr:nth-child(2) { height: 20px;table tr:nth-child(3) { height: 30px;table tr:nth-child(4) { height: 40px;table tr:nth-child(5) { height: 50px; mySelectors = '#foo#bar.baz'{mySelectors background: #000 Yields:#foo#bar.baz { background: #000; // 对象插值foo = { width: 10px height: 20px '&:hover': { padding: 0 .bar {fooYields:// => .bar {// width: 10px;// height: 20px;// // .bar:hover {// padding: 0;//

5. @EXTENDform input[type=text
padding: 5px border: 1px solid #eee color: #ddd textarea @extends form input[type=text
padding: 10px //Yielding: form input[type=text
textarea { padding: 5px; border: 1px solid #eee; color: #ddd; textarea { padding: 10px;

对于维护一份高质量的CSS代码，注释和间隔必不可少以下是一种比较建议的注释和间隔方式，可以自行取用。
/*------------------------------------*\\ #A-SECTION*------------------------------------*/.selector { /*------------------------------------*\\ #ANOTHER-SECTION*------------------------------------*//** * Comment */.another-selector {

除了缩进，我们还可以通过在规则集之间自由而明智地使用空格来提供大量信息。我们用：
密切相关的规则集之间的一 (1) 条空行。松散相关的规则集之间的两 (2) 条空行。全新部分之间的五 (5) 行空行。
// good case/*------------------------------------*\\ #FOO*------------------------------------*/.foo { .foo__bar { .foo--baz { // bad case.foo { .foo__bar { .foo--baz {

同理，在html结构中，也可以使用同样的规则。
除了以上这些，还有众多的规范和优化可以继续探索，如选择器性能， CSS嵌套，有兴趣的读者可以继续探索