在 WebStorm/PhpStorm 中开启对 Compass 的支持

文章目录[隐藏]

开启 File Watchers 对 Compass 的支持
取消错误的语法检查

在最新的 WebStorm/PhpStorm 6 更新中，加入了一系列优秀的前端开发工具。其中的 File Watchers 功能可以自动编译诸如 Sass、SCSS、LESS、CoffeeScript 和 TypeScript 等预处理器语言。对我来说这是一个非常实用的扩展功能，通过它已经可以替代过去 CodeKit 所做的部分工作。但是 File Watchers 目前还缺乏对 Compass 框架的支持，这对使用 Sass/SCSS 的开发者来说影响是非常大的。

下面就说说如何配置 WebStorm/PhpStorm，使其对 Compass 提供良好的支持。

开启 File Watchers 对 Compass 的支持

安装 Compass

首先要确保系统已经安装了 Compass （需要 Ruby 环境）。如果「终端」中不存在 compass 指令则说明 Compass 还未安装，需要执行下面的命令：

$ gem install compass

在 File Watchers 中添加 Compass 配置文件

在 WebStorm/PhpStorm 设置里，找到项目设置中的「File Watchers」。点击 [+] 添加配置。可以看到许多内置模板，根据需要选择 SASS 或 SCSS。

Compass 配置文件

具体配置如下：

File type: SASS files 或 SCSS files
Scope: Project Files
Program: bash（Win 下可能是 C:\Ruby\bin\compass.bat）
Arguments: -login -c "compass compile"
Working directory: $ProjectFileDir$
Output paths: $FileNameWithoutExtension$.css 或留空

注意事项：

如果遇到奇怪的编译错误，可以把「Arguments」设置为 -login -c "compass clean && compass compile" 。
「Working directory」必须指向带有 Compass 配置文件 config.rb 的路径。一般在项目根目录，使用 $ProjectFileDir$ 即可。
如果你想让输出文件与 SCSS 文件在不同的路径，比如 SCSS 文件在 scss 目录，输出的 CSS 文件在项目根目录，那么只要把「Output paths」设置为 $ProjectFileDir$/$FileNameWithoutExtension$.css 就可以了。其他结构可以根据后面的「Insert macro...」自行设置；
如果觉得自动编译太讨厌，可以把「Immediate files syncchronization」自动编译关掉。

确认后保存设置。就可以通过 Compass 自动编译 SCSS 文件了。

如何忽略指定文件的编译

比起 CodeKit，File Watchers 还缺少一个快速忽略指定文件编译的功能。你只能采用 _filename.scss 这样在文件名开头加下划线的方式来指定忽略编译这个文件。当然出于模块化考虑，这样的命名方式本身是有好处的。

取消错误的语法检查

WebStorm/PhpStorm 默认的语法检查并不支持 Compass 语法，所以 @import "compass"; 会被错误警告。

解决方法：在「Project Settings - Inspection」里取消「SASS/SCSS」的「Cannot resolve import into sass/scss file」和「Unresolved mixin」这两个选项就不会乱报错了。

通过上面的设置，WebStorm/PhpStorm 已经可以很好的对 Compass 进行支持了。我想大部分使用 Sass/SCSS 的前端工作者都在用 Compass 框架，也希望 JetBrains 早日加入原生支持。