Question

如何为WebStorm设置SASS的File Watchers

Answer 1

Webstorm是一个很牛叉的IDE，现在工作每天都是用它了。
最近开始用SASS，LESS等来写CSS，而在Webstorm中，它自带一个File Watchers功能，设置一下，即可实时编译SASS，LESS等。
LESS的实时编译很简单，在node平台安装一下即可。
而在折腾SASS在Webstorm上的实时编译时，花了我一点时间。因为按照网上的教程设置都不成功，最后自己把设置改来改去终于折腾好了。
下面就是在WebStorm设置SASS的File Watchers的步骤：
1. 安装Ruby
http://www.rubyinstaller.org/，去这里下载，然后安装。
2. 安装Sass
安装好Ruby后，打开CMD命令，输入：
gem install sass

注意：
这里有可能安装没反应或提示网络错误什么的。解决办法是使用淘宝的Ruby gem镜像：
$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install sass

3. 上面都安装没问题以后，就可以设置Webstorm或PHPStorm了
3.1 打开Webstorm的设置界面，然后搜索File Watcher；
3.2 点击File Watchers界面的增加按钮；
3.3 然后设置界面如下：
注意：
如果你想用SCSS，并且Ruby是安装在默认路径下，那么”File Type:“和”Program：“那里的设置就和我一样；
如果是用SASS，那么你在新建时应该选择SASS的类型，”Program：“也应该选”sass.bat“。

Answer 2

Webstorm是一个很牛叉的IDE，现在工作每天都是用它了。 最近开始用SASS，LESS等来写CSS，而在Webstorm中，它自带一个File Watchers功能，设置一下，即可实时编译SASS，LESS等。 LESS的实时编译很简单，在node平台安装一下即可。

Answer 3

下面就是在WebStorm设置SASS的File Watchers的步骤：
1. 安装Ruby
下载，然后安装。
2. 安装Sass
安装好Ruby后，打开CMD命令，输入：
gem install sass
注意：
这里有可能安装没反应或提示网络错误什么的。解决办法是使用淘宝的Ruby gem镜像：
$ gem sources --remove rubygems.org
$ gem sources -a
$ gem sources -l
*** CURRENT SOURCES ***
# 请确保只有
$ gem install sass
3. 上面都安装没问题以后，就可以设置Webstorm或PHPStorm了
3.1 打开Webstorm的设置界面，然后搜索File Watcher；
3.2 点击File Watchers界面的增加按钮；
3.3 然后设置界面如下：
注意：
如果你想用SCSS，并且Ruby是安装在默认路径下，那么”File Type:“和”Program：“那里的设置就和我一样；
如果是用SASS，那么你在新建时应该选择SASS的类型，”Program：“也应该选”sass.bat“。