本文主要介紹一下如何在webstorm上使用sass，實時自動編譯sass文件。
一、安裝
1、在翻*墻的情況下：
1）首先要為自己電腦安裝ruby
2）執(zhí)行命令行：
$ gem install sass
2、未翻*墻的情況下：
$ gem sources --remove?https://rubygems.org/
$ gem sources -a?https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***
#請確保只有ruby.taobao.org
$ gem install sass
二、webstorm參數(shù)配置
1）打開webstorm->settings -> tools -> file watchers
2）參數(shù)配置
Program：/usr/local/bin/sass
Arguments：--no-cache --update --style expanded --watch $FileName$:$FileParentDir$\$FileNameWithoutExtension$.css
Working directory：$FileDir$
Output paths to refresh：$FileNameWithoutExtension$.css
另外筆者推薦另一種方法：
【使用compass】
1）安裝：$ gem install compass
2）編寫config.rb文件
require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "/pc/style/css"
sass_dir = "/pc/style/sass"
images_dir = "/pc/style/img"
javascripts_dir = "/pc/js"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
preferred_syntax = :sass
3）在webstorm的Terminal中輸入$ compass watch即可
