一．Sass：
css预处理器，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。（与其有类似功能的还有less）
（一）css与sass与scss之间的关系：
Sass(Syntactically Awesome Style Sheets) ,是一种css预处理器和一种语言, 它可以用来定义一套新的语法规则和函数，以加强和提升CSS. 它有很多很好的特性，但是它有类似Ruby的语法，没有花括号，没有分号，遵循严格的缩进，它在书写规则，变量命名方面和CSS代码有着很大的区别。
于是，后来官方在2010年推出了一个全新的语法，叫做SCSS, 意思是 Sassy CSS. 这个语法带来了对CSS友好的语法，试图弥合Sass和CSS之间的差别， 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
（1）文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
（2）语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
二．Sass安装：
npm install -g sass / npm install sass
三．使用：
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。
四．基本用法：
（一）sass嵌套-选择器嵌套
SASS 中的嵌套主要说的是选择器嵌套和属性嵌套两种方式，正常项目中通常使用的都是选
择器嵌套方案
【注】在嵌套的过程中，如果需要用到父元素，在 SASS 中通过&符号引用父属性
本来在css写，需要.content .list .item ,而在sass文件里，可以直接嵌套，如：
.content{
.list{
.item{
width:34px
}
}
}
即可编译成
.content .list .item{
width:34px
}
在嵌套的代码块内，也可以使用&引用父元素。比如a:hover伪类，可以写成：
a {
&:hover { color:red; }
}
其他伪类选择器还有：
动态伪类选择器（:link :visited :hover :active :focus）
- :link：链接没有被访问时的效果（微信小程序不支持）
- :hover：鼠标经过的效果（微信小程序不支持）
- :visited：链接被访问后的效果（微信小程序不支持）
- :active：鼠标点下去的效果（正发生在点的那一下）
- :focus：获得焦点后的效果
状态伪类选择器（:enabeld :disabled :checked）
选择伪类选择器（:first-child :last-child :nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type() :first-of-type :last-of-type :only-child :only-of-type）
- :first-child：选择某个元素的第一个子元素（更确切的说为：选择第一个使用该属性的元素）
- :last-child：选择某个元素的最后一个子元素（更确切的说为：选择最后一个使用该属性的元素）
- :nth-child()：选择某个元素的一个或多个特定的子元素（参数从1开始）
- :nth-last-child()：选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算
- :nth-of-type()：选择指定的元素（参数从1开始）
- :nth-last-of-type()：选择指定的元素，从元素的最后一个开始计算
- :first-of-type：选择一个上级元素的第一个同类子元素
- :last-of-type：选择一个上级元素的最后一个同类子元素
- :only-child：选择的元素是它的父元素的唯一一个子元素
- :only-of-type：选择一个元素是它的上级元素的唯一一个相同类型的子元素
空内容伪类选择器（:empty）：选择的元素里面没有任何内容
否定伪类选择器（:not）：不匹配该属性的每个元素（微信小程序不支持）
伪元素（::first-line ::first-letter ::before ::after ::selection）
- ::first-line：第一行
- ::first-letter：第一个字母
- ::selection：文本被选择（如复制时）后的效果，CSS只能修改background与color两个属性，微信小程序不支持
（二）变量：SASS允许使用变量，所有变量以$开头。
如：
$blue : #1875e7;
div {
color : $blue;
}
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。如：
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
一般可用在公用较多的颜色、单位等（主题色、设计图规范单位）
（三）计算功能
SASS允许在代码中使用算式，*变量与变量之间的运算只有乘除 * /，如：
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
（四）注释
SASS共有两种注释风格。
- 标准的CSS注释 /* comment */ ，会保留到编译后的文件。
- 单行注释 // comment，只保留在SASS源文件中，编译后被省略。
- 在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
五.代码的复用
（一）继承
SASS允许一个选择器，继承另一个选择器。比如，现有class_first：
.class_first {
border: 1px solid #ddd;
}
class_sec要继承class_first，就要使用@extend命令：
.class_sec{
@extend .class_first;
font-size:120%;
}
（二）Mixin
Mixin是可以复用的代码块（建一个mixin.sass文件把重复较多的代码块写进去，后面引用文件复用(@import命令，用来插入外部文件)，或个性化复用也可以在页面定义后使用），步骤：
①使用@mixin命令，定义一个代码块。
@mixin center-flex {
display: flex;
align-items: center;
justify-content: center;
}
②使用@include命令，调用这个mixin。
div {
@include center-flex ;
}
mixin还于可以指定参数和缺省值。如：
@mixin center-flex($value: center) {
display: flex;
align-items: center;
justify-content: $value;
}
使用的时候，根据需要加入参数：
div {
@include center-flex(space-between) ;
}
一个mixin的实例，用来生成浏览器前缀:
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
在使用的时候调用：
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
混合器传参
@mixin link-colors($normal,$hover,$active){
a{color:$normal;}
a:hover{color:$hover;}
a:active{color:$active;}
}
//调用
a{@include link-colors(blue, red, green);}
当定义了混合器后调用时可能会忘记参数的意义和顺序，可以不按照参数排列的顺利，只要一个都不少即可。
（三）颜色函数
SASS提供了一些内置的颜色函数，以便生成系列颜色。
lighten(#cc3, 10%) // #d6d65c //变亮
darken(#cc3, 10%) // #a3a329 //变暗
grayscale(#cc3) // #808080 //灰度级
complement(#cc3) // #33c //补充
六.高级用法
（一）@if可以用来判断：
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
配套的还有@else命令：
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
（二）循环语句
SASS支持for循环：
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
也支持while循环：
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each命令，作用与for类似：
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
（三）自定义函数
SASS允许用户编写自己的函数。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
