Sass进阶一

初学sass完全感受不到sass作为一种编程语言的完全性，接着往后面学，sass才开始精彩。
①、sass支持类似c语言的条件、循环语句
@if @else @while @each @for
if .. else ... 没什么油水
@for 支持两种语法

@for $i from 1 through 12{/*$i in [1,12]*/}@for $i from 1 to12{/*$i in [1,11]*/}

@while也与一般语言相似，只要后面的表达式为true便可以继续循环
@each与javascript里面的forEach类似

@each $key in $list{/*    $key...*/}

②、sass支持强大的函数功能
自定义函数@function

@function numbers($number){  @if $number > 10{     @return "yes";  }@else {     @return "no";  }}

字符串函数

unquote($string) 去除字符串的引号quote($string) 添加引号to-upper/lower-case($string) 字符串格式化

数学函数

percentage($value)：将一个不带单位的数转换成百分比值；round($value)：将数值四舍五入，转换成一个最接近的整数；ceil($value)：将大于自己的小数转换成下一位整数；floor($value)：将一个数去除他的小数部分；abs($value)：返回一个数的绝对值；min($numbers…)：找出几个数值之间的最小值；max($numbers…)：找出几个数值之间的最大值；random(): 获取随机数

列表函数

  length($list)：返回一个列表的长度值；  nth($list, $n)：返回一个列表中指定的某个标签值  join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；  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)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；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)：判断两个值是否可以做加、减和合并