月归档:三月 2013

在 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。 具体配置如下: 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 早日加入原生支持。

发表在 软件技巧 | 标签为 , , , , , | 12 条评论