在 WebStorm/PhpStorm 中开启对 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 或留空

注意事项:

  1. 如果遇到奇怪的编译错误,可以把「Arguments」设置为 -login -c "compass clean && compass compile" 。
  2. 「Working directory」必须指向带有 Compass 配置文件 config.rb 的路径。一般在项目根目录,使用 $ProjectFileDir$ 即可。
  3. 如果你想让输出文件与 SCSS 文件在不同的路径,比如 SCSS 文件在 scss 目录,输出的 CSS 文件在项目根目录,那么只要把「Output paths」设置为 $ProjectFileDir$/$FileNameWithoutExtension$.css 就可以了。其他结构可以根据后面的「Insert macro...」自行设置;
  4. 如果觉得自动编译太讨厌,可以把「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 早日加入原生支持。

此条目发表在 软件技巧 分类目录,贴了 , , , , , 标签。将固定链接加入收藏夹。

在 WebStorm/PhpStorm 中开启对 Compass 的支持》有 12 条评论

  1. 追梦无痕 说:

    专业的都看不懂...

  2. 小媒体 说:

    很前沿的技术啊,不太懂。

  3. kevin 说:

    「Cannot resolve import into sass/scss file」
    这一个选项没找到

  4. kevin 说:

    我用的是webstorm 7.0.Mac版本。只找到了5个选项。

  5. kevin 说:

    这个去掉的非常不可理解,我更新到7.0.1
    打开了设置中的compass support,依旧报错。
    请问compass support要如何设置呢?

  6. zyc 说:

    您博客背景画线的这个功能挺有意思...问下博主 这是怎么实现的呢或者用的什么插件?

  7. baibanbao 说:

    你好,请教您一个问题。用WORDPRESS的话,请问,下面这段画背景的代码放到哪个文件里?

    harmony()

    我试过FOOTER,CONTENT,都不行。

    请指教!

  8. ray 说:

    你好!我的是webstorm 10 提示error style.scss (Line 2: File to import not found or unreadable: compass/css3.),按你方法设置了还是提示,没办法编译,据你说的,7.0已经支持原生的了,10.0的应该不会出现这个的,