CSS进阶指引

CSS Code复制内容到剪贴板

// sass   
@mixin bordered($color: #000) {   
    border: dotted 2px $color;   
}   
.header { @include bordered; }   
.footer { @include bordered(#BADA55); }   
  
//编译的CSS   
.header {   
    border: dotted 2px black;    
}   
.footer {   
    border: dotted 2px #bada55;    
}  

　　它看起来和前面几乎相同，但如果我们秋看第二个placeholder的用例：

CSS Code复制内容到剪贴板

// sass   
%bordered {   
    border: dotted 2px #000;   
}   
.header {    
    @extend %bordered;    
}   
.footer {    
    @extend %bordered;    
}   
  
// 编译的CSS   
.header, .footer {   
    border: dotted 2px #000;    
}  

　　这个有两个优势，首先不会编译出.bordered类名，其次会使用组合选择器，合并相同的样式，使代码变得更加简洁。
　　配置（Configuration）

　　LESS和Sass都支持变量，你可以调用这些变量，将将他们作为属性的值：

CSS Code复制内容到剪贴板

// sass   
$brand-color: #009f0A;   
…   
h1 {   
    color: $brand-color;   
}  

　　这是一个很好的特性，因为你可以储存一些重要的东西，比如说颜色或者网格的宽度，将他们存放在同一个地方，如果你需要修改一些不经常改动的代码，会变得非常的简便。

　　另一个好处理，可以使用变量的插值，如下面演示的方法：

CSS Code复制内容到剪贴板

// sass   
@mixin border($side) {   
    border-#{$side}: solid 1px #000;   
}   
.header {   
    @include border("left");   
}   
  
// 编译的CSS   
.header {   
    border-left: solid 1px #000;    
}  

　　针对预处理器（Against the preprocessors）