前言
这段时间一直在看Bootstrap，V3官方直接提供了Less版本的源码，就先将Less学完了，很简单的语法，学习写Demo都是在Webstorm里写的，配置了Watcher自动编译（详见《在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件》）。
随着学习的加深，开始接触Sass了，Bootstrap V3也提供了Sass的源码，而且V4官方就只提供Sass的源码，从侧面证明Sass的流行趋势，毕竟Sass功能更全面，因此笔者决定以后就使用Sass了（新版本叫Scss）。
开始动手
1、下载rubyinstaller-2.3.3-x64.exe 安装（从官网下载，注意，安装过程中下面的设置。
2、安装完成后用命令检查是否安装成功，成功会显示版本信息。
ruby -vgem -v12
3、安装Sass
gem install sass1
安装完后，C:\Ruby23-x64\bin里将有下面的文件。
4、Webstorm里添加Watcher
同Less类似，在工程里新建scss文件时会自动显示【Add Wather】,如果没有提示，也可以通过【文件(File)】-【设置(Settings)】-【工具(Tools)】-【File Watchers】-【+】-【SCSS】打开New Watcher配置界面。
默认值(默认生成css 和 css.map)
参数名
参数值(下面no和update前是两个”-“)
Program C:\Ruby23-x64\bin\scss.bat
Arguments –no-cache –update $FileName$:$FileNameWithoutExtension$.css
Output paths to refresh $FileNameWithoutExtension$.css
修改后（生成压缩后css）
参数名
参数值(下面no和update前是两个”-“)
Program C:\Ruby23-x64\bin\scss.bat
Arguments –no-cache –update -t compressed $FileName$:$FileNameWithoutExtension$.css
Output paths to refresh $FileNameWithoutExtension$.css
很简单，比Less还要简单。写一段scss代码试试。
补充：
参数值里，-t 后面可以配置的值
值
结果
nested 嵌套
expanded 展开
compact 每句一行
compressed 压缩
阅读全文
版权声明：本文为博主原创文章，未经博主允许不得转载。
1、koala软件编译2、sass命令：依靠环境。
自动编译命令：（编译单个文件/编译整个文件夹）
编译单个文件
sass文件目录 sass --watch scss文件的路径:css文件的路径 --style expanded
编译整个文件夹
sass文件目录 sass --watch scss文件夹/. : css文件夹/. --style expanded
3、gulp编译
4、hbulid编译
① 工具--预编译设置
② 新建一个预编译配置 .scss
③ 输入触发命令的地址：ruby里面的sass.bat地址
④ 命令参数：%FileName% ../css/%FileBaseName%.css
vscode只是编辑器，不具备这种读取并编译的功能（可以使用在nodeJS使用的sass插件实现），不过vscode
可以把正在编辑的scss文件在保存的时候编译成css。在找到插件之前你可能需要：
建议还是看看sass或者scss的官方文档，到底什么能编译出来（已收货14踩！）。
