// 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;
}