Sass进阶一

append($list1, $val,[$separator])：将某个值放在列表的最后；

zip($lists…)：将几个列表结合成一个多维的列表；

index($list, $value)：返回一个值在列表中的位置值。

注意： length函数中的列表必须要以空格来相隔，否则cmd会报错(但经我测试我的电脑并没有报错)

nth函数下标从1开始

join只能连接两个列表，可选择连接后的列表的分隔方式，建议指定[separator]，否则输出会乱，comma(,) space(空格)；返回一个新的list

zip函数将所有列表的同一索引的值

$width: 1px 2px 3px;

$solid: solid dashed solid;

$color: black blue red;

$list:zip($width,$solid,$color);

.box{

border: nth($list, 1);

}

/结果/

.box {

border: 1px solid black; }

index查找不到会返回false

Map函数

Sass有一种类似JSON的数据，也就是类似javascript的对象，称作map，语法如下：

$map(

$key1: value1,

$key2: value2,

$key3: value3

)

map可以嵌套

map-get($map, $key) /返回map[key]/

map-merge($map1, $map2) /合并map/

map-remove($map, $key) /remove map[key]/

map-keys($map) /返回所有的keys/

map-values($map) /返回所有的value/

map-has-key($map) /map[key] 存在？/

keywords($args) /动态创建map。。。传入类似map的内容/

颜色函数无聊到爆。。。(*)比较有用

rgb部分

rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；

rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；

red($color)：从一个颜色中获取其中红色值；

green($color)：从一个颜色中获取其中绿色值；

blue($color)：从一个颜色中获取其中蓝色值；

(*)mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。

mix函数的第三个参数是第一个颜色所占程度，默认50%

hsl部分

hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；

hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；

hue($color)：从一个颜色中获取色相（hue）值；

saturation($color)：从一个颜色中获取饱和度（saturation）值；

lightness($color)：从一个颜色中获取亮度（lightness）值；

adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色；

(*)lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；

(*)darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；

(*)saturate($color,$amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色

(*)desaturate($color,$amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；

《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%);

(*)complement($color)：返回一个补充色，相当于adjust-hue($color,180deg);

(*)invert($color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。

lighten()函数第二个参数一般为百分数，代表在当前基础下变亮百分之。。。其余函数类似，都是在当前基础上变化

opacity部分

alpha($color)/opacity($color)：获取颜色透明度值；

rgba($color, $alpha)：改变颜色的透明度值；

opacify($color, $amount)/fade-in($color, $amount)：使颜色更不透明；

transparentize($color, $amount)/fade-out($color, $amount)：使颜色更加透明。

color函数，只需要理解它们，到用它们时再查手册即可。

还有几个判断函数 Introspection函数

type-of($value)：返回一个值的类型

unit($number)：返回一个值的单位

unitless($number)：判断一个值是否带有单位

comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并