掌握、使用SASS混合器、继承、运算

重点

• 使用混合器实现样式的重用
• 使用选择器继承来精简CSS
• 熟练掌握运算

---

1. 使用混合器实现样式的重用

        如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体)，那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。

        混合器使用(mixin标识符定义。看上去很像其他的css@标识符，比如说&media或者(font-face。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。

//@mixin
// 混合器的定义：@mixin 混合器的名称{代码}
@mixin name {
    color: aqua;
    font-family: "微软雅黑";
    font-size: 22px;
}

        然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下面这样写：

.div2 {
    color: rgb(0, 26, 255);
    width: 200px;
    height: 50px;
    @include name;
}

//sass最终生成
.div2 {
  color: #001aff;
  width: 200px;
  height: 50px;
  color: aqua;
  font-family: "微软雅黑";
  font-size: 22px;
}

1-2. 混合器中的CSS规则

        混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性，如下代码:

@mixin btn {
    background-color: rgb(247, 2, 255);
    color: white;
    border-color: gray;
    width: 100px;
    height: 30px;
    border-radius: 5