less、scss、sass都是CSS预处理器语言
为什么要使用CSS预处理器？
css缺点：
（语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。）
scss和sass的区别：
文件扩展名不同：“.sass”和“.scss”
语法规则不同：sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进，scss更常用
sass与less的区别：
Less是基于JavaScript，是在客户端处理的。Sass是基于Ruby的，是在服务器端处理的。
变量在Less和Sass中的唯一区别就是Less用@，Sass用$。
Less环境较Sass简单
Less使用较Sass简单
Sass功能略强大一些：sass有变量和作用域、sass有函数的概念、进程控制、数据结构
为什么选择使用Sass而不是Less？
1、Sass在市面上有一些成熟的框架，比如说Compass，而且有很多框架也在使用Sass，比如说Foundation。
2、就国外讨论的热度来说，Sass绝对优于LESS。
3、就学习教程来说，Sass的教程要优于LESS。在国内LESS集中的教程是LESS中文官网，而Sass的中文教程，慢慢在国内也较为普遍。
4、Sass也是成熟的CSS预处理器之一，而且有一个稳定，强大的团队在维护。
5、同时还有Scss对sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。
6、bootstrap（Web框架）最新推出的版本4，使用的就是Sass。
sass 中文文档：sass中文网
sass教程：sass基础
sass
一、导入文件
命名约定
sass局部文件的文件名以下划线开头。
这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。
当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。
举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import “themes/night-sky”。
默认变量值
使用sass的==!default标签==可以实现这个目的。
!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。
嵌套导入
sass允许@import命令写在css规则内
原生css的导入
不能用sass的@import直接导入一个原始的css文件，因为sass会认为你想用css原生的@import。但是，因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了。
二、注释
静默注释：以//开头，注释内容直到行末，不同于css标准注释格式/* … */的注释语法
body {color: #333; // 这种注释内容不会出现在生成的css文件中padding: 0; /* 这种注释内容会出现在生成的css文件中 */}
三、变量
变量声明：$
引用也要$
$hong:red;.app{color:$hong;border:1px solid $hong;}
四、 嵌套
子选择器可以不写前面的父级
.fat{color:$hong;border:1px solid $hong;width: 200px;height: 200px;div{background-color: $hong;width: 100px;height: 100px;}}
群组选择器的嵌套
由这种
.container h1, .container h2, .container h3 {margin-bottom: .8em }
改为
.container {h1, h2, h3 {margin-bottom: .8em}}
子组合选择器：>
a>b:选择a的子元素里面命中b的
同层相邻组合选择器：+
a+b：选择a的同层的相邻的b
同层全体组合选择器：~
a~b：在a后面与a同层的所有b
属性嵌套
nav {border: {style: solid;width: 1px;color: #ccc;}}
五、混合器
混合器使用==@mixin标识符定义。这个标识符给一大段样式赋予一个名字，这样就可以轻易地通过@include==引用这个名字重用这段样式
混合器传参
@mixin link-colors($normal, $hover, $visited) {color: $normal;&:hover {color: $hover; }&:visited {color: $visited; }}传参：a {@include link-colors(blue, red, green);}或a {@include link-colors($normal: blue,$visited: green,$hover: red);}
默认参数值
参数默认值使用==$name: default-value==的声明形式
@mixin link-colors($normal,$hover: $normal,$visited: $normal){color: $normal;&:hover {color: $hover; }&:visited {color: $visited; }}
六、选择器继承
通过@extend语法实现
//通过选择器继承样式.error {border: 1px solid red;background-color: #fdd;}.seriousError {@extend .error;border-width: 3px;}
.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承
跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小
不要在css规则中使用后代选择器（比如.foo .bar）去继承css规则
七、函数
数字
abs（）：绝对值
round（）：四舍五入
ceil（）：进一位，ceil（3.2）=4
floor（）：退一位，floor（3.2）=3
percentage（）：得到百分数
min（）：最小值
max（）：最大值
字符串
+：字符串拼接
-、/：直接以-、/连接
to-upper-case：转大写
to-lower-case：转小写
str-length：长度
str-index：查找位置
str-insert（字符串，插入的，位置）：插入字符
颜色
rgb与rgba（多一个值，表示透明度）
hsl与hsla
adjust-hue：调整色相
lighten、darken：调整亮度
saturate、desaturate：调节饱和度
opacify和transparentize：调节透明度
列表
length：长度
nth（）：获得第几个
index（）：获得位置序号
append（）：插入新的值
join（）：拼接
interpolation：把一个值插入到另一个值里，写法==#{}==，类似拼接
控制指令
@if @else
@for：@for $var from value1 through value2
@each：@each $icon in $icons
自定义函数
@function
警告错误
@warn
@error
