webstrom 是我前端开发最喜欢的一个编译工具,因为它集成了许多的插件,安装后就可以在wenstorm中配置就可以轻松进行开发了。
今天想说的是webStorm下如何实现sass自动编译。ok,let's begin
打开settings,可以看到Tools下面有个file watchers选项,点进去如下图
点击加号,选择SCSS或者SASS(根据自己写的格式,SCSS是最新版的SASS后缀),我们这里选择是SCSS,进入配置界面
Programe是scss编译工具的目录地址,因为SASS是依赖ruby的,所以我们还需要去安装ruby,ruby在window下的安装文件下载可以在 http://rubyinstaller.org/downloads/ 网站找到,我这里下的193。其他环境的可以去官网下载:https://www.ruby-lang.org/
安装好ruby以后,打开cmd,输入gem install sass就可以安装SASS了,但是由于gem的默认原地址由于国内伟大的GFW原因可能连接不上导致无法安装,所以我们还需要替换一下。
依次输入:
gem sources –r http://rubygems.org/
gem sources –a http://ruby.taobao.org/
gem sources –l
如果我们看到最后显示的地址只有国内淘宝提供的镜像地址就OK了
然后再输入gem install sass就可以了,完成后输入sass –v 就会返回sass的版本号。
OK以后,在webstorm里面选择本机ruby目录下bin目录里面的scss.bat文件(如果需要编译SASS文件则选择sass.bat)
下面的输出参数,可以根据自己的需要填写,下面列出的是一些常用的参数
--style
表示解析后的css是什么格式,如:--style
有四种取值分别为:compressed,
nested
,expanded
,compact
,compressed.
--sourcemap
表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map
文件。 webstorm是默认开启sourcemap的,所以可以不填写--debug-info
表示开启debug信息,升级到3.3.0之后因为sourcemap更高级,这个debug-info就不太用了。
可以看到,我输入内容后,直接在源文件下生成了一个css文件和一个map文件。
可以参考关于sass这篇文章-----http://www.w3cplus.com/sassguide/