安装Ruby、Sass在WebStrom添加Watcher实现编辑scss文件时自动生成.map和压缩后的.css文件

前言

这段时间一直在看Bootstrap，V3官方直接提供了Less版本的源码，就先将Less学完了，很简单的语法，学习写Demo都是在Webstorm里写的，配置了Watcher自动编译（详见《在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件》）。 
随着学习的加深，开始接触Sass了，Bootstrap V3也提供了Sass的源码，并且V4官方就只提供Sass的源码，从侧面证实Sass的流行趋势，毕竟Sass功能更全面，所以笔者决定之后就使用Sass了（新版本叫Scss）。

 

一、下载rubyinstaller-2.3.3-x64.exe 安装（从官网下载，或者从这里连接：http://pan.baidu.com/s/1o7BxbR0 密码：rctf），注意，安装过程当中下面的设置。 

 
二、安装完成后用命令检查是否安装成功，成功会显示版本信息。

ruby -v gem -v

• 1
• 2

• 1
• 2

 
三、安装Sass

gem install sass

• 1

• 1

安装完后，C:\Ruby23-x64\bin里将有下面的文件。 
 
四、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	压缩