sass

@mixin   @include 混合器 

　　　　@mixin col($num){　　　　　　　　　　//编写mixin方法
　　　　　　$num;
　　　　　　height:$num;
　　　　}
　　　　.div{

　　　　　　@include col(100px);　　　　　　//使用@include调用方法
　　　　　　background-color: #f5f5f5;　　　 
　　　　}

　　　　@mixin col($num:100px){　　　　　　　　　　//默认参数
　　　　　　$num;
　　　　　　height:$num;
　　　　}
　　　　.div{

　　　　　　@include col();　　　　　　　　　//调用时不用传参　　如果不带参数， （）可以省略
　　　　　　background-color: #f5f5f5;　　　 
　　　　}

@extend 继承

　　　　 .b{

　　　　　　 @extend .a;　　　　　　//首先要有.a这个类的样式　　　　

　　　　 }

　　　　@extend .p,.cols;　　　　可以连写　　@import也可以连写 

　　　　假设  .a{color:#fff}   .b{@extend .a}  .a.b{color:#000}     .b会继承.a       即 .a,.b{color:#fff}    再继承.a.b     即  .a.b,.b{color:#000}      .a.b在后  所以#000颜色会覆盖#fff

% 占位符　　

　　　　 构建仅用来继承的选择器，不会输出到css中

　　　　%a{ ... }        　　.b { @extend %a }

@at-root 转为CSS时 不包含嵌套 

 　　　　.a{ .b{ } }     转为css时，.b是转为.a下的.b （.a .b ）   

　　　　.a{ @at-root{ .b{  }  }  }　　　　加上@root    .b在转化的时候  直接是转为.b

参数校验

　　　　@mixin col-sm($50%) {
　　　　　　@if type-of($width) !=number {　　　　//判断类型
　　　　　　　　@error "$width必须是一个数值类型，你输入的是#{$width}"
　　　　　　}
　　　　@if not unitless($width) {　　　　　　//判断数值是否无单位，有单位的话返回false 
　　　　　　@if unit($width)!="%" {　　　　　　//判断单位是否是百分号 
　　　　　　　　@error "$width应该是一个百分值，你输入的是#{$width}"　　　　#{} 字符串中填写变量
　　　　　　}
　　　　} @else {
　　　　　　@warn "$width应该是一个百分值，你输入的是#{$width}" ;
　　　　　　$percentage($width);　　　　 //将数值转换为百分比
　　　　　　}
　　　　$width;
　　　　}

config配置文件

　　　　config里的output_style

　　　　取值为 :expanded     默认输出格式

　　　　取值为 :nested时　　包含结构嵌套

　　　　取值为 :compact时　　选择器汇总在一行

　　　　取值为 :compressed时 　　压缩格式　　上线前使用

　　　　

　　　　config中的line_comments

　　　　修改为 line_comments = false   去除转换后的css中的注释

unquote($string)：删除字符串中的引号； 

quote($string)：给字符串添加引号

To-lower-case() 函数 与 To-upper-case() 刚好相反，将字符串转换成小写字母：

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

•       length($list)：返回一个列表的长度值；
•       nth($list, $n)：返回一个列表中指定的某个标签值  

  >> nth(10px 20px 30px,1)
  10px

•       join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；
•       append($list1, $val, [$separator])：将某个值放在列表的最后；
•       zip($lists…)：将几个列表结合成一个多维的列表；
•       index($list, $value)：返回一个值在列表中的位置值。

• type-of($value)：返回一个值的类型
• unit($number)：返回一个值的单位
• unitless($number)：判断一个值是否带有单位  不带单位返回的值为 true
• comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并

if($condition,$if-true,$if-false)

>> if(true,1px,2px)
1px
>> if(false,1px,2px)
2px

• map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值。
• map-merge($map1,$map2)：将两个 map 合并成一个新的 map。
• map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。
• map-keys($map)：返回 map 中所有的 key。
• map-values($map)：返回 map 中所有的 value。
• map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。
• keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。

mix($color-1,$color-2,$weight);

mix(#f00, #00f) => #7f007f
mix(#f00, #00f, 25%) => #3f00bf

rgba($red,$green,$blue,$alpha)  //将一个rgba颜色转译出来，和未转译的值一样
rgba($color,$alpha)  //将一个Hex颜色转换成rgba颜色

 border-color: rgba(green,.5);

 border-color: rgba(0, 128, 0, 0.5);