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)：判断两个值是否可以做加、减和合并