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

我就是我 2021-09-11 06:48 172阅读 0赞

# 前言 #

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

# 开始动手 #

1、下载rubyinstaller-2.3.3-x64.exe 安装（从官网下载，或者从这里链接：[http://pan.baidu.com/s/1o7BxbR0][http_pan.baidu.com_s_1o7BxbR0] 密码：rctf），注意，安装过程中下面的设置。  
![这里写图片描述][SouthEast]  
2、安装完成后用命令检查是否安装成功，成功会显示版本信息。

ruby -v
    gem -v

![这里写图片描述][SouthEast 1]  
3、安装Sass

gem install sass

安装完后，C:\\Ruby23-x64\\bin里将有下面的文件。  
![这里写图片描述][SouthEast 2]  
4、Webstorm里添加Watcher  
同Less类似，在工程里新建scss文件时会自动显示【Add Wather】,如果没有提示，也可以通过【文件(File)】-【设置(Settings)】-【工具(Tools)】-【File Watchers】-【+】-【SCSS】打开New Watcher配置界面。  
![这里写图片描述][SouthEast 3]  
默认值(默认生成css 和 css.map)

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>参数值(下面no和update前是两个”-“)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Program</td> 
   <td>C:\Ruby23-x64\bin\scss.bat</td> 
  </tr> 
  <tr> 
   <td>Arguments</td> 
   <td>–no-cache –update $FileName$:$FileNameWithoutExtension$.css</td> 
  </tr> 
  <tr> 
   <td>Output paths to refresh</td> 
   <td>$FileNameWithoutExtension$.css</td> 
  </tr> 
 </tbody> 
</table>

修改后（生成压缩后css）

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>参数值(下面no和update前是两个”-“)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Program</td> 
   <td>C:\Ruby23-x64\bin\scss.bat</td> 
  </tr> 
  <tr> 
   <td>Arguments</td> 
   <td>–no-cache –update -t compressed $FileName$:$FileNameWithoutExtension$.css</td> 
  </tr> 
  <tr> 
   <td>Output paths to refresh</td> 
   <td>$FileNameWithoutExtension$.css</td> 
  </tr> 
 </tbody> 
</table>

很简单，比Less还要简单。写一段scss代码试试。  
![这里写图片描述][SouthEast 4]

补充：  
参数值里，-t 后面可以配置的值

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>结果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>nested</td> 
   <td>嵌套</td> 
  </tr> 
  <tr> 
   <td>expanded</td> 
   <td>展开</td> 
  </tr> 
  <tr> 
   <td>compact</td> 
   <td>每句一行</td> 
  </tr> 
  <tr> 
   <td>compressed</td> 
   <td>压缩</td> 
  </tr> 
 </tbody> 
</table>

[WebStorm_watcher_less_.map_.css]: http://blog.csdn.net/lhtzbj12/article/details/54882683
[http_pan.baidu.com_s_1o7BxbR0]: http://pan.baidu.com/s/1o7BxbR0
[SouthEast]: /images/20210809/e0a252a19d204a218ee1a2a53dc7b3cb.png
[SouthEast 1]: /images/20210809/7d264ef859714811ba5885732443a240.png
[SouthEast 2]: /images/20210809/a0609d3d61e84e7dbf5b3a2b8dee5ff5.png
[SouthEast 3]: /images/20210809/b87539124f674f90b216071e88627b99.png
[SouthEast 4]: /images/20210809/ce5c1f16129d4ad09a79591ee35d915f.png