文章翻译:《在WebStorm中使用Compass》

前言

译者按:小半月前贺林大哥推荐我翻译这篇文章来扩展我的博客内容,拖了很久了,先谢大哥推荐之恩。
文章是JetBrains官方博客发表在2013年12月5日的一篇普通的科普文,作者Ekaterina Prigara,是JetBrains公司的WebStorm产品营销经理。原文出处在Using Compass in WebStorm
WebStorm集成了非常多的优秀功能,虽然可能会有点笨重,但是很强大(给我惯出了懒癌导致git什么的到现在还一脸懵逼如同咸鱼)。
我在近期的开发和学习也都是在WebStorm上进行的。手里的还不是正版,有能力的话会直接入手正版的,很值。

正文

Sass 和 SCSS 在变量(variables)、组合(mixin)、选择器继承(selector inheritance)以及其他优秀特点上扩展了原生的CSS,使得CSS在现代化开发的大背景下更加友好易用。而 Compass 框架便是在基于 Sass 同时,增加了多种多样的优秀复用样式,在大多数情况下让 Sass 和 SCSS 更好用了。

Compass

通过以下几步,在你 WebStorm 的项目上搭建 Compass 环境:

首先,确认你的电脑上已经安装过了 Ruby 环境。在已经有了 Ruby 环境之后,在控制台输入命令安装 Compass:gem install compass(事实上你完全可以直接在 WebStorm 内置的 Terminal 里进行安装)。
具体的安装信息你可以参考这里:http://compass-style.org/install/
如果你想要在新的项目里使用 Compass,你可以在 WebStorm 的 Terminal 里使用这一命令:compass init。这个操作会在项目的根目录创建 SCSS 和 CSS 文件的文件夹,并且创建一个属于 Compass 的config.rb文件。

图2

现在咱们来创建一个新的.scss(或者.css)文件。

WebStorm 将会提示你添加一个新的文件监听器(File Watcher)用以自动化地把 SCSS/Sass 文件编译成为 CSS。在我们了解自己该怎么使用 Compass 以及它是如何调用不同的文件监听器的时候,我们暂且无视这个提示。

图3

范例
@import "compass"

WebStorm 此时还没有得到 Compass 的配置。软件中会出现一个为项目配置 Compass 快速修复提示,此时按下Alt+Enter就可以应用这个快速修复,或者我们也可以进入系统偏好设置(Preferences/Setting)中的 Compass 支持(Compass Support)来激活 Compass 支持。

图4

然后选中 启用 Compass 支持(Enable Compass support),并确认。

图5

现在 WebStorm 就会为你提供一个增加 Compass 文件监听的入口了。你输入和输出文件的目录(地址)可以在文件 config.rb中相对的配置出来。此时你也能够在SCSS或Sass文件被修改的时候直接得到自动编译出来的CSS文件。

图6

如果你有一个文件结构比较个人化、并且配置文件 config.rb 还不在项目的根目录的时候,这时想把 Compass 配置给此项目,你需要确认以下两点:

  • Compass 支持设置(Compass Support settings)config.rb的文件目录是正确的;同时——
  • 参数设置(Arguments)中输入的文件目录、以及在实时刷新文件的输出目录(Output path to refresh)都要指向正确的文件目录上。

举个例子,我们当前有这样的一个项目结构:

图7

然后,在 Compass 支持设置(Compass Support settings)中,config.rb的文件目录应该是:

图8

文件监听器(File Watcher)配置应该按照如下方式:

图9

如果你在已经配置过一次 Compass 之后移动了config.rb的位置并且(/或者)移动了有 SCSS/Sass 的文件夹或 CSS 文件,不要忘记在文件监听器(File Watcher)的设置里面及时更新config.rb的文件目录和 Compass 支持设置(Compass Support settings)里面的文件目录。

标签: none

仅有一条评论

  1. 这尼玛根本看不懂,话说狗哥日语挺好的。

添加新评论