sass的混合器、继承以及运算符、函数

一、混合器

1.概念

在sass我们可以通过变量来复用小规模的样式（颜色、字体等），但如果我们想要复用一整段的样式代码，那变量就没办法了。还好sass定义了一个新特性 — 混合器 ，来专门实现多行代码的复用。如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成混合器，尤其是这段样式本身就是一个逻辑单元，比如说是一组放在一起实现某个特定的页面样式。

​ 混合器的样式也不一定是一成不变的，可以通过参数的形式没生成特定的样式。

​ 但混合器也不能滥用，滥用混合器，可能会导致代码很少，但生成的样式表过大，导致页面加载缓慢。

2.定义混合器@mixin

在sass中使用@mixin定义一个混合器，其实就是给一段代码起了个名字，然后我们就可以重复利用这些这些代码。

// 混合器格式：@mixin 混合器名称 {代码}  无参
@mixin a_0 {
    text-decoration: none;
    font-size: 50px;
    font-family: '黑体';
    font-weight: bold;
}

3.引用混合器  @include

我们定义好混合器之后，我们就可以通过 @include 标识符来引用混合器。在哪个地方进行引用，混合器的代码就会插入到哪个地方。

.nav {
    color: aqua;
    @include a_0(); // 引用混合器
}

编译后的css代码

.nav {
  color: aqua;
  text-decoration: none;
  font-size: 50px;
  font-family: "黑体";
  font-weight: bold;
}

4.混合器传参

sass在定义混合器时，可以提前定义好形参，然后在引用时，传递参数，生成特定样式，跟JS的函数时分类似，实参会按照顺序一一传递给形参。

// 混合器格式：@mixin 混合器名称($参数名) {代码}  有参
@mixin a_1($bgcol, $col, $radius, $borwid, $borcol) {
    background-color: $bgcol;
    color: $col;
    border-radius: $radius;
    border: $borwid solid $borcol;
    text-decoration: none;
    font-size: 50px;
    font-family: '黑体';
    font-weight: bold;
}

.a1 {