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

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($) {-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官方文档进行学习。