sass介绍
1. SASS概述
1.1 SASS简介
由于CSS的语法不够强大，没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面的形式反复出现，导致难以维护。而动态演示语言为CSS赋予了动态语言的特性，极大的提高了样式语言的可维护性。
SASS是便是一门动态样式语言，是一款款强化CSS的辅助工具，它在CSS语法的基础上，增加了变量，嵌套，混合，导入，函数的高级功能，这些拓展使CSS更加强大与优雅，有助于更好的管理样式文件，以及更高效的开发项目。
SCSS是SASS 3引入新的语法，其语法完全兼容CSS3，并且继承了SASS的强大功能。SASS和SCSS其实是同一种东西，我们平时都称之为 SASS，两者之间不同之处有以下两点：
（1）文件扩展名不同：SASS 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名；
（2）语法书写方式不同：SASS 是以严格的缩进式语法规则来书写，不带大括号({})和分号(?，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
Bootstrap4便是使用SASS生成的，而原来的版本使用的是另一种预编译语言LESS，其他常见的动态样式语言还有stylus。
1.2 Node环境下SASS与CSS的转换
以下命令均在控制台命令下输入：
单文件 多文件
转换 正确路径>node-sass SASS文件名 CSS文件名 node-sass -w SASS文件名 CSS文件名
监听 正确路径>node-sass SASS文件夹名 -o CSS文件夹名 node-sass -w SASS文件夹名 CSS文件夹名
2. SASS语法
2.1 变量
SASS中的变量声明以$符号开头，变量名称命名规范遵循CSS选择器的命名规范（即可以包含下划线_和连接符-），命名原则为——见名知其意。
例如：
$jd_red:#f00; //颜色变量
$my-width:20px;
$normal-content:“grean person said”; //数值变量
$my-border-style:solid; //样式变量
m y b o r d e r : 1 my_border:1 my
b
order:1my-width $my-border-style $jd_red; //变量中引用其他变量
注意：
（1） 声明变量时，变量定义在{}规则块外部，整个样式文件都可以该变量，如果定义在{}规则块里面，则只能在当前规则块中使用；
（2） 声明变量时，变量值可以引用其他变量；
（3） 声明重复的变量，后声明的变量会覆盖签名的变量；
（4） !default规则：即当在声明变量的后面增加!default时，如果该新声明的变量在前面已经声明赋值了，就使用前面这个已经声明的值，如果变量没有声明赋值，使用新声明的值。
例如：
在前面已经声明变量：
$jd_red:#f10215;
现在新声明变量：
$jd_red:#00f !default;
此时变量jd_red的值就应该为：#f10215。
2.2 嵌套规则
（1） 普通选择器嵌套：
#content{
div.top{
h1{color:$jd_red;}
p{background:$jd_red;}
}
div.middle{border:1px solid $jd_red;}
}
生成的CSS如下：
#content div.top h1 {
color: #f10215; }
#content div.top p {
background: #f10215; }
#content div.middle {
border: 1px solid #f10215; }
（2） 伪类选择器嵌套：
a{color:#f00;
&:hover{color:#ff0;}
}
注意：需要在嵌套的内容之前添加“&“符号，如果不添加，会在”：“之前产生一个空格，导致浏览器不读取这个伪类。
（3） 群组选择器嵌套：
nav,div,footer,header{
a{color:#f00;}
}
生成的CSS如下：
nav a, div a, footer a, header a {
color: #f00;
}
（4） 样式属性嵌套：
div{
border:{width:1px;style:solid;color:#f00;};
}
生成的CSS如下：
div{
border-width:1px;
border-style:solid;
border-color:#f00;
}
2.3 在SASS文件中引用SASS文件
为了编写方便，有时候会在一个SASS文件中引用已经编写好的SASS文件，而在这个SASS文件中，可以使用被引用文件中的变量和函数。
被引用SASS文件（局部文件名）的命名通常以下划线开头，比如_color.scss。
导入的语法：@import “局部文件名”。其中局部文件名不写下划线，不写后缀。比如引用_color.scss文件，可以表示为@import "color "。
在编译的时候，不会编译以下划线开头的文件（局部文件），在使用局部文件的文件被编译时，局部文件的内容会被一起编译。
2.4 混合器
当在SASS中需要使用重复的样式时，可以把需要复用的样式封装进一个混合器，在使用时，直接调用混合器即可。使用混合器，可以实现代码的复用，提升代码的可维护性。
语法：
声明混合器：
@mixin 混合器名称(参数1,参数2){
复用的样式；
}
使用混合器：
选择器{
@include 混合器名称(参数1,参数2);
}
2.5 继承
一个选择器可以继承另外一个选择器定义的所有样式。
语法：@extend 继承的样式;
比如：
.rounded{
border:1px solid #f00;
border-radius: 30%;
}
.rounded-shadow{
@extend .rounded;
box-shadow: 0 0 10px;
}
继承的原理：继承的效果以群组选择器的状态出现。即：
.rounded, .rounded-shadow {
border: 1px solid #f00;
border-radius: 30%;
}
.rounded-shadow {
box-shadow: 0 0 10px;
}
2.6 运算
（1） 加法
在SASS中可正常正常进行加法运算，但是在做字符串连接时，需要注意：当加号左边有双引号时，计算结果就有双引号；而当加号有变有双引号时，计算结果没有双引号。
（2） 减法
在SASS中也可以正常使用减法，但是在使用减法时，最好在减号前后加上空格键，以便防止编译时，将减号错识为连接符。
（3） 除法（取余）
在SASS中也可以正常使用除号（/），但有时会将”/“符号作为分割数字来使用，只有在下列情况时，才会将”/“视为除法：
①当”/“两边的值或者值的一部分是变量或者函数返回值时，比如：width:$width/2；
②当”/”被圆括号包裹时，比如：height:($width/2)；
③当值是算式表达式的一部分时，比如：margin-left:5px+8px/2px；
注意：在有引号的字符串中使用#{}插值语句可以动态的添加值，比如：
div::after{
content:“I ate #{15+23} baozis”;
}
I ate 38 baozis
（4） 颜色值运算
颜色值也可以进行运算，而颜色值的运算是分段运算，也就是分别计算颜色。
比如：
rgb(00,11,22)+rgb(33,44,55)=rgb(33,55,77);
rgba(00,11,22,0.4)+rgba(33,44,55,0.4);
注意：rgba相加时，必须要求alpha值相同，否则不予运算。
2.7 函数
2.7.1 已定义函数
（1） 颜色函数
rgba(red,green,blue,alpha)
hsl(hue,saturation,lightness)
hue：色调 0-360 三个色段，每120一个
saturation：饱和度 0.0%--100.0%
lightness:亮度 0.0%--100.0%
（2） 数字函数
round($value) 四舍五入
ceil($value) 向上取整
floor($value) 向下取整
min($v1,$v2...)
max($v1,$v2....)
random() 随机数
（3） 字符串函数
unquote($str) 删除字符串的引号
quote($str) 给字符串添加引号
to_upper_case($str) 将字符串小写字母变成大写字母、
to_lower_case($str) 将字符串大写变小写
2.7.2 自定义函数
语法：
@function 函数名称(参数){
@return 返回值;
}
例如：
@function get_width($n){
$w1:200px;
$w2:500px;
@return ($w2 - $w1)*$n;
}
div{
width:get_width(2);
}
注意：
在使用函数时，还可以使用控制语句，比如if语句：
$type:moon;
div{
@if($type= =sun){
background:#f00;
}@else if($type= =moon){
background:#0ff;
}@else if($type==mars){
background:#ff0;
}@else {background:#000;}
}
参考：https://blog.csdn.net/weixin_43727168/article/details/102558618
