JS - WebStrom使用SASS工具自动编译.sass为.css

前言：

SASS用法指南-阮一峰

Perform : Mac

正文

使用Webstrom的默认编译选项

当写一个*.sass文件时，Webstrom会自动提示我们是否开启File Watchers。

当点击Yes时就会弹出SCSS的配置选项，当然也可以通过下面方式来添加SCSS：

Webstrom -> Preferences -> Tools -> File Watchers -> +

当使用默认选项时，SASS自动编译会将*.sass文件自动编译为*.css&*.css.map文件，且放在同级目录下。

ProjectRoot
|
-- sass
    |
    -- test.sass
    -- test.css
    -- test.css.map

当然，当然请确保使用如下命令安装了SASS：

brew install ruby
gem install sass

指定输出的目录

也可以修改SASS的配置选项中的Arguments来修改*.css&*.css.map的输出目录。

// 这里是将`*.css&*.css.map`文件输出到ProjectRoot/target/css目录下

--no-cache --update $FileName$:$ContentRoot$/target/css/$FileNameWithoutExtension$.css

此外，推荐将Options中的Trigger watcher ...选项勾上，并将Show Console改为Always，用来保证SASS的实时性。

配置图