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 {
    @include a_1(pink, red, 10px, 5px, red);
    // 引用混合器  @include 混合器名称(参数)
}

如果我们不想按照顺序一一对应进行传参的话，我们可以通过$name: value给指定参数传值，这样我们就不用去管顺序了。

.a1 {
    @include a_1($bgcol:pink, $col:red, $radius10px, $borwid:5px, $borcol:red);
    // 引用混合器  @include 混合器名称(参数)
}

我们还可以给混合器的参数设置一个默认值：

@mixin a_2($bgcol, $col, $radius, $borwid, $borcol:$col) {
                                            //默认值 
    background-color: $bgcol;
    color: $col;
    border-radius: $radius;
    border: $borwid solid $borcol;
    text-decoration: none;
    font-size: 50px;
    font-family: '黑体';
    font-weight: bold;
}

.a2 {
    @include a_2(green, yellow, 15px, 10px);
}

如果传入的参数数量不确定，我们在定义形参时可以通过 ... 的形式：

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

编译后的css样式：

shadowed {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

二、继承

1.概念

在sass中为了进一步减少代码的重复书写，还提出了继承的概念，继承是基于选择器的，也就是说一个选择器可以继承为另一个选择器定义的所有样式。默认浏览器样式是不会被继承的，因为它们不属于样式表中的样式。

​ 继承的原理并不是通过样式属性的复制来实现的，而是通过选择器的复制实现的，所以跟混合器相比，继承生成的css代码相对更少。

2.用法

// 继承
.btn {
    display: inline-block;
    width: 100px;
    height: 30px;
    border-radius: 10px;
    text-decoration: none;
    text-align: center;
    line-height: 30px;
}

.btn1 {
    @extend .btn;
    color: white;
    background-color: antiquewhite;
}

.btn2 {
    @extend .btn;
    color: red;
    background-color: rosybrown;
}

.btn3 {
    @extend .btn;
    color: forestgreen;
    background-color: yellowgreen;
}

.btn4 {
    @extend .btn;
    color: yellow;
    background-color: green;
}

编译后的css代码：

.btn, .btn4, .btn3, .btn2, .btn1 {
  display: inline-block;
  width: 100px;
  height: 30px;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  line-height: 30px;
}

.btn1 {
  color: white;
  background-color: antiquewhite;
}

.btn2 {
  color: red;
  background-color: rosybrown;
}

.btn3 {
  color: forestgreen;
  background-color: yellowgreen;
}

.btn4 {
  color: yellow;
  background-color: green;
}

三、运算符

在sass中有加减乘除的数学运算符，有大于小于号的比较运算符，还有并且，或、非等逻辑运算符

1.加减乘除

p {
    // +
    // width: 10+20;
    // width: 10+20px;
    // width: 10+20%;
    // -
    // width: 20-10;
    // width: 20-10px;
    // width: 20-10%;
    // /
    // 只有两个数值或者两个单位的时候，/作为分隔符
    // width: 20/10;
    // 如果里面有变量或者整体是一个表达式的时候 /作为运算符
    $num: 1000;
    width: $num/20;
    width: 20-10/5;
    // #{}
    $num1: 102;
    // 当不想让变量之间进行运算的时候可以用插值语句包裹起来
    width: #{$num}/#{$num1};
}

2.比较运算符

p {
    $num1: 102;
    @if $num1>200 {
        background-color: red;
    }
    @else {
        background-color: aqua;
    }
}

编译后的css代码

p {
  width: 50;
  width: 18;
  width: 1000/102;
  background-color: aqua;
}

3.逻辑运算符

p {
    $num1: 102;
    $col: red;
    @if $num1<200 and $col==red {
        background-color: red;
    }
    @else {
        background-color: aqua;
    }
}

编译后的css代码：

p {
  width: 50;
  width: 18;
  width: 1000/102;
  background-color: red;
}

四、函数

sass里面不仅可以使用上面那些，还可以使用函数。

Color(颜色函数)

Sass包含很多操作颜色的函数。

lighten() 与 darken()函数可用于调亮或调暗颜色

opacify()函数使颜色透明度减少

transparent()函数使颜色透明度增加

mix()函数可用来混合两种颜色。

String（字符串函数）

Sass有许多处理字符串的函数。

向字符串添加引号的quote()

获取字符串长度的str-length()

将内容插入字符串给定位置的str-insert()

Math(数值函数)

数值函数处理数值计算。

percentage()将无单元的数值转换为百分比

round()将数字四舍五入为最接近的整数

min()和max()获取几个数字中的最小值或最大值

random()返回一个随机数。 

List函数

List函数操作List。

length()返回列表长度

nth()返回列表中的特定项

join()将两个列表连接在一起

append()在列表末尾添加一个值。

Map函数

Map函数操作Map。

map-get()根据键值获取map中的对应值

map-merge()来将两个map合并成一个新的map

map-values()映射中的所有值。

selector选择器函数

选择符相关函数可对CSS选择进行一些相应的操作。

selector-append()可以把一个选择符附加到另一个选择符

selector-unify()将两组选择器合成一个复合选择器。

这只是其中一部分函数，sass里面还有很多的函数，大家可以参考sass官方文档进行学习。