sass语法进阶小结

Sass的控制命令
1.@if
与@else if和@else可一起用

2.@for循环
语法：@for $i from <start> through <end>
@for $i from <start> to <end>
$i 表示变量
start 表示起始值
end 表示结束值
注：这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。

3.@while循环
条件为true则执行

4.@each循环
语法：@each $var in <list>
$var 就是一个变量名，<list> 是一个 SassScript 表达式，他将返回一个列表值。变量 $var 会在列表中做遍历，并且遍历出与 $var 对应的样式块。

Sass函数
5.字符串函数-unquote（）
（1）unquote（$string）函数：删除字符串中的引号；
注：unquote( ) 函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。

（2）quote($string)函数：给字符串添加引号；
注： quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起；同时 quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错

6.字符串函数--To-upper-case()、To-lower-case()
(1)To-upper-case() 函数将字符串小写字母转换成大写字母。
(2)To-lower-case() 函数将字符串大写字母转换成小写字母。

7.数字函数
（1）percentage（$value）:将一个不带单位的数转换成百分比值；
例：
>> percentage(.2)
20%
>> percentage(2px / 10px)
20%
>> percentage(2em / 10em)
20%

（2）round($value)：将数值四舍五入，转换成一个最接近的整数；
（3）ceil($value)：将大于自己的小数转换成下一位整数；
（4）floor($value)：将一个数去除他的小数部分；
（5）abs($value)：返回一个数的绝对值，正数；
（6）min($numbers…)：找出几个数值之间的最小值；
（7）max($numbers…)：找出几个数值之间的最大值；
（8）random(): 获取随机数。

8.列表函数简介
（1）length($list)：返回一个列表的长度值；
（2） nth($list, $n)：返回一个列表中指定的某个标签值；
语法：nth($list,$n)
例如：
>> nth(10px 20px 30px,1)
10px
>> nth((Helvetica,Arial,sans-serif),2)
"Arial"
注：在 nth($list,$n) 函数中的 $n 必须是大于 0 的整数。

（3） join($list1, $list2, [$separator])：将两个列表给连接在一起，变成一个列表；
注： join() 只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错。但很多时候不只碰到两个列表连接成一个列表，这个时候就需要将多个 join() 函数合并在一起使用：
>> join((blue red), join((#abc #def),(#dee #eff)))
(#0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff)

join() 函数中还有一个很特别的参数 $separator，这个参数主要是用来给列表函数连接列表值是，使用的分隔符号，默认值为 auto。还有 comma 和 space 两个值，其中 comma 值指定列表中的列表项值之间使用逗号（,）分隔，space 值指定列表中的列表项值之间使用空格（ ）分隔。

情形一：如果列表中的第一个列表中每个值之间使用的是逗号（,）或空格，那么 join() 函数合并的列表中每个列表项之间使用逗号,或空格 分隔。

情形二：但当第一个列表中只有一个列表项，那么 join() 函数合并的列表项目中每个列表项目这间使用的分隔符号会根据第二个列表项中使用的，如果第二列表项中使用是,分隔，则使用逗号分隔；如果第二列项之间使用的空格符，则使用空格分隔。

（4）append($list1, $val, [$separator])：将某个值放在列表的最后；
例如：
>> append((10px,20px),30px)
(10px, 20px, 30px)

注：
在 append() 函数中，可以显示的设置 $separator 参数，
如果取值为 comma 将会以逗号分隔列表项
如果取值为 space 将会以空格分隔列表项

（5） zip($lists…)：将几个列表结合成一个多维的列表；
例如：
>> zip(1px 2px 3px,solid dashed dotted,green blue red)
((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))

（6） index($list, $value)：返回一个值在列表中的位置值。
注意：第一个值就是1，不是从0开始算起。

9.introspection函数（判断型函数）
（1）type-of（$value）：返回一个值得类型
number：数值型
string：字符串型
bool：布尔型
color：颜色型

（2）unit（$number）：返回一个值得单位
主要是用来获取一个值所使用的单位，碰到复杂的计算时，其能根据运算得到一个“多单位组合”的值，不过只充许乘、除运算。
注：但加、减碰到不同单位时，unit() 函数将会报错，除 px 与 cm、mm 运算之外。

（3）unitless（$number）：判断一个值是否带有单位。
（4）comparable（$number-1,$number-2）：判断两个值是否可以做加、减和合并。
如果可以返回的值为 true，如果不可以返回的值是 false。
例如：
>> comparable(2rem,1em)
false
>> comparable(2px,1cm)
true

10.Miscellaneous函数（三元条件函数）
语法：if($condition,$if-true,$if-false)
例如：
>> if(true,1px,2px)
1px
>> if(false,1px,2px)
2px

11.Map
语法：
$map: (
$key1: value1,
$key2: value2,
$key3: value3
)
可以嵌套：
$map: (
key1: value1,
key2: (
key-1: value-1,
key-2: value-2,
),
key3: value3
);

12.Maps的函数：
（1）map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值。
（2）map-merge($map1,$map2)：将两个 map 合并成一个新的 map。
注：如果 $map1 和 $map2 中有相同的 $key 名，那么将 $map2 中的 $key 会取代 $map1 中的。

（3）map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。
（4）map-keys($map)：返回 map 中所有的 key。
（5）map-values($map)：返回 map 中所有的 value。
（6）map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。
（7）keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。

RGB颜色函数
13.RGB颜色函数（能快速的将颜色转换为十六进制颜色表达）：
（1）rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
（2）rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
（3）red($color)：从一个颜色中获取其中红色值；
（4）green($color)：从一个颜色中获取其中绿色值；
（5）blue($color)：从一个颜色中获取其中蓝色值；
（6）mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。前两个参数是要混合的颜色，最后一个参数是混合的比例。
例如：如果指定的比例是 25%，这意味着第一个颜色所占比例为 25%，第二个颜色所占比例为75%。

14.sass -i
在命令终端开启这个命令，相当于开启 Sass 的函数计算。

HSL函数
15.HSL函数：
（1）hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
（2）hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；
（3）hue($color)：从一个颜色中获取色相（hue）值；
（4）saturation($color)：从一个颜色中获取饱和度（saturation）值；
（5）lightness($color)：从一个颜色中获取亮度（lightness）值；
（6）adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色；通常这个度数值是在 -360deg 至 360deg 之间，当然了可以是百分数。

（7）lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
（8）darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
（7）、（8）都是颜色亮度，这个亮度值可以是 0~1 之间，不过常用的一般都在 3%~20% 之间。

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

（11）grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%);颜色饱和度为0。
（12）complement($color)：返回一个补充色，相当于adjust-hue($color,180deg);
（13）invert($color)：返回一个反相色，红、绿、蓝色值倒过来，而透明度不变。

Opacity函数
16.Opacity函数：
（1）alpha($color) /opacity($color)：获取颜色透明度值；
（2）rgba($color, $alpha)：改变颜色的透明度值；
（3） opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明；
（4）transparentize($color, $amount) / fade-out($color, $amount)：使颜色更加透明。

17.@import：引入文件

18.@media

19.@extend：用来扩展选择器或占位符。

20.@at-root:从字面上解释就是跳出根元素。当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。

21.@debug:调试；@warn:与@debug功能类似，都是调试的；@error也一样。