开始编写sass

// 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的用例：

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

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

配置（Configuration）

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

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

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

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

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