sass混合器

一.为什么要用sass混合器

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

二.sass混合器的使用

创建混合器：@mixin name {}
使用混合器：@include name{}
混合器可以带参数

在sass文件中这样书写

 css文件中得到

 三.参数

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

 @mixin color($bgcolor, $border-color, $border-width) {
     background-color: $bgcolor;
     color: $border-color;
     border: $border-width solid $border-color;
 }
//进行调用
.btn-warning {
    @include btn();
    @include color(yellow, pink, 10px);
}

得到

.btn-warning {
  width: 200px;
  height: 60px;
  border-radius: 10px;
  background-color: yellow;
  color: pink;
  border: 10px solid pink;
}

4.继承

​ sass中通过@extend 标识符来实现继承：

 sass运算符

数学运算符：+ - * /

关系运算符：> < <= >=

逻辑运算符： and or  not

例如：下面的例子计算宽度

    $a: 30px;
    $b: 20px;
    border-radius: $a/10px; //3  
    border-radius: (30/10)px;
    border-radius: 10px+30px/10px;

/*  /作为运算符 1.使用变量  2.加括号  3.和其他运算符一起使用 */

那么结果为

  border-radius: 3;
  border-radius: 3 px;
  border-radius: 13px;
  border-radius: 30px+20px;

颜色操作符

算术操作符也适用于颜色。计算颜色时，参与运算的是R, G, B分量，而不是整个六位数颜色值。

例如，当把两个十六进制颜色值相加时，将依次把每一对分量值相加

div{
    color: #030303+#303030; 
}

经过编译得到

div{
    color: #333333；
}

sass常见函数的基本使用

Color(颜色函数)

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

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

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

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

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

String（字符串函数）

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

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

quote(hello) //"hello"

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

str-length("hello") //5

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

Math(数值函数)

数值函数处理数值计算。

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

percentage(1.2) // 120

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

round(15.20) // 15 
round(15.80) // 16

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

random()返回一个随机数。 

List函数

三大注意点：

1、Sass 列表(List)函数用于处理列表，可以访问列表中的值，向列表添加元素，合并列表等。

2、Sass 列表是不可变的，因此在处理列表时，返回的是一个新的列表，而不是在原有的列表上进行修改。

3、列表的起始索引值为 1，记住不是 0。

List函数操作List。

length()返回列表长度

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

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

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

Map函数

Map函数操作Map。

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

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px) 
map-get($font-sizes, "small") // 12px

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

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

selector选择器函数

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

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

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