前言
在JavasScrip框架满天飞的年代，前端三板斧之一的CSS也前前后后涌出Sass、Less、Stylus等多款CSS预处理框架。
今天我们要讲的就是其中的的老大哥Sass的升级版Scss，Scss给我们提供了变量、循环、继承、混入、函数等一系列强大的功能以方便我们开发。
以前觉得Scss简单，后来发现，简单是真的简单，我菜也是真的菜
Scss和Sass
Sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的CSS代码，这一代的Sass也被称为Scss。
Sass版本
Sass有三个版本DartSass、libsass和RubySass：
DartSass，用Dart语言写的sass实现，于年11月1日发布alpha版本，版本1.23.0之后完全支持模块化机制。
libSass也就是俗称的node-sass，用c/c++实现的sass版本，使用非常广泛。node-sass是绑定了libsass的nodejs库，可以极快的将.scss文件编译为.css文件，这个安装过程……，懂的都懂，官方也不推荐再使用了。
RubySass，是最初的Sass实现，但是年3月26日被停止了，以后也不会再支持，使用者需要迁移到别的实现上。
环境配置
中文文档的安装教程是RubySass，个人推荐使用npm安装DartSass，这也是官方推荐的方式。
全局安装
npm默认安装的是DartSass了。
npminstall-gsass
项目结构
code
--css
--index.scss
--dist
监听运行
使用命令行操作，监听文件夹下的scss文件并输出为css文件，如果是webpack项目，则需要使用sass-loader。
sass--style=expanded-wcss:dist--no-source-map
LiveSassCompiler
如果你使用的VSCode的LiveSassCompiler插件，可以参考我的配置，这个插件用的Sass版本是LibSass3.5.4，对有些指令存在兼容性和不支持的情况。
"liveSassCompile.settings":{
"generateMap":false,
"formats":[
{
"format":"expanded",
"savePath":"~/css/",
}
]
}
输出格式
嘿嘿，下面正文术语都同统一改为小写哈。scss提供了四种输出格式，在命令行中使用--style选项进行设置，在LiveSassCompiler中配置format参数。
「注：」dartsass只支持expanded和