scss：sass3以后的新语法，功能完全等价，语法上{ scss使用大括号，sass使用缩进 }不能混用，会报错 并且scss中可以直接写css
Sass有三个版本Dart Sass、libsass和Ruby Sass
npm install -g sass 全局安装sass
scss选择器嵌套语法 避免重复输入父选择器，提高开发效率，减少样式覆盖可能造成的异常问题 属性也可以嵌套，例.container { font: { family: fantasy; size: 30em; weight: bold; } } 等价于.container { font-family: fantasy; font-size: 30em; font-weight: bold; }避免重复输入相同的开头
父选择器& 就是向上找一层，选择上外层的父选择器 用法 &： 即可
注释/* */编译时会被编译到css文件中 注释// 编译时不会编译到css文件中（scss专属注释）
变量 $ 赋值写法与css相同 {
1. 变量以美元符号`$`开头，后面跟变量名；
2. 变量名是不以数字开头的可包含字母、数字、下划线、横线（连接符）；
3. 通过连接符`-`与下划线`_`定义的同名变量为同一变量；
4. 变量一定要先定义，后使用；
5. 写法同`css`，即变量名和值之间用冒号`:`分隔；
}
变量作用域：嵌套规则内定义的变量只能在嵌套规则内使用，但声明在最外层的变量可以在任何地方使用，属于全局变量 ！global可以将局部变量提升为全局变量
scss数据类型{
number；string；color；boolean；null；数组（用空格或逗号分开）；maps（类似于js的object 键值对）
}
！default“温柔默认值”，如果没有其他赋值，就使用！default所标注的赋值，有其他赋值就当！default不存在
== != 正常规则
> < >= <= 正常规则
and or not
加减乘除余（纯数字与百分号或单位运算时会自动转化成相应的百分比与单位值）
加还可连接字符串{
1. `+`可用于连接字符串；
2. 如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的；
3. 无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。
}
插值语句#{} 规则与js模版字符串类似
@import 导入文件 以下情况下，@import 仅作为普通的css语句，不会导入scss文件：
1. 文件拓展名是`.css`；
2. 文件名以 `http://`开头；
3. 文件名是`url()`；
4. `@import`包含媒体查询。
@media媒体查询增强
@media 指令允许在css规则中嵌套，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。
@media允许互相嵌套使用，编译时，scss自动添加 and
mixin 混入 定义可重复使用的样式 例 @mixin block { width: 96%; margin-left: 2%; border-radius: 8px; border: 1px #f6f6f6 solid; } .container { .block { @include block; } } 还可以传入参数 参数还可制定默认值，调用时携带参数则使用携带的参数，不携带则使用默认值
总结
1. `mixin`是可以重复使用的一组`css`声明，有助于减少重复代码，只需声明一次，就可在文件中引用；
2. 混合指令可以包含所有的 `css`规则，绝大部分`scss`规则，可以传递参数，输出多样化的样式；
3. 使用参数时建议加上默认值；
4. `@import`导入局部模块化样式（类似功能、同一组件）；
5. `@minix`定义的是可重复使用的样式
@function 用于封装复杂的操作 用法与mixin类似 @function一般用来计算，而mixin用来封装样式
@extend 继承 @function和@mixin都是封装好一个函数，然后后续调用 而@extend则是写好一个样式后，在要调用这个样式的时候@extend+这个样式 可以使用多个@extend 继承也可以嵌套，实现多层继承
@use 代替 @import
@at-root 用来跳出嵌套进行操作
@without和with
默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)或@at-root (without: support)，@at-root的关键词有四个：
1. `all`表示所有；
2. `rule`表示常规`css`选择器；
3. `media` 表示`media`；
4. `support`表示`support`（`@support`主要是用于检测浏览器是否支持`css`的某个属性）。
scss内置扩展
color lighten()与 darken()可用于调亮或调暗颜色，opacify()使颜色透明度减少，transparent()使颜色透明度增加，mix()用来混合两种颜色
String 向字符串添加引号的quote()、获取字符串长度的string-length()和将内容插入字符串给定位置的string-insert()
math percentage()将无单元的数值转换为百分比，round()将数字四舍五入为最接近的整数，min()和max()获取几个数字中的最小值或最大值，random()返回一个随机数
list length()返回列表长度，nth()返回列表中的特定项，join()将两个列表连接在一起，append()在列表末尾添加一个值
Map map-get()根据键值获取map中的对应值，map-merge()来将两个map合并成一个新的map，map-values()映射中的所有值
selector selector-append()可以把一个选择符附加到另一个选择符，selector-unify()将两组选择器合成一个复合选择器
