Sass

1. css预处理
   CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题
   例如：

• Sass（scss）
• LESS
• Stylus
• Turbine
• Swithch CSS
• CSS Cacheer
• DT CSS

2. sass
   Tips
   Sass 和 SCSS区别：
   文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
   语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

3. 声明变量
   $width:300px
   sass变量包括三个部分

• 声明变量的符号$
• 变量名称
• 赋予变量的值

4. 普通变量与默认变量
   普通变量：定义后在全局范围内使用
   默认变量：在值后加上!default,用来设置默认值，覆盖的方式为在默认变量之前重新声明下变量即可

5. 全局变量和局部变量
   全局变量就是定义在元素外面的变量，局部变量为定义在元素内部的变量

6. 混合宏、继承和占位符

//混合宏
@mixin mt($var){
  margin-top: $var;  
}
.block {
  @include mt(5px);
}
//继承
.mt{
  margin-top: 5px;  
}
.block {
  @extend .mt;
}
//占位符
%mt{
  margin-top: 5px;  
}
.block {
  @extend %mt;
}

7. sass语法

@if @else
@for $i from <start> through <end>//包括end
@for $i from <start> to <end>//不包括end
@while
@each $var in <list>

8. sass函数介绍

• 字符串函数
• 数字函数
• 列表函数
• 颜色函数
• Introspection 函数
• 三元函数

9. 字符串函数

• unquote($string)：删除字符串中的引号
• quote($string)：给字符串添加引号
• To-upper-case() 函数将字符串小写字母转换成大写字母
• To-lower-case() 函数将字符串转换成小写字母

10. 数字函数

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

11. 列表函数

• length($list)：返回一个列表的长度值，参数之间用空格隔开
• nth($list, $n)：返回一个列表中指定的某个标签值，从1开始
• join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表，不能超过两个
• append($list1, $val, [$separator])：将某个值放在列表的最后
• zip($lists…)：将几个列表结合成一个多维的列表，每个单一列表对应相同位置的值
• index($list, $value)：返回一个值在列表中的位置值

12. Introspection函数

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

13. 三元条件函数

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

14. map数据地图（类似于json结构）

• 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

15. 颜色函数

• rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色
• rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色
• red($color)：从一个颜色中获取其中红色值
• green($color)：从一个颜色中获取其中绿色值
• blue($color)：从一个颜色中获取其中蓝色值
• mix($color-1,$color-2,[$weight])：把两种颜色混合在一起

16. 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)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变

17. opacity函数

• alpha($color) /opacity($color)：获取颜色透明度值；
• rgba($color, $alpha)：改变颜色的透明度值；
• opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明
• transparentize($color, $amount) / fade-out($color, $amount)：使颜色更加透明