PhpStormでCompassを使う


思いの外、前回の記事(PhpStormでSass/SCSSを使う)が好評だったので、PhpStormでCompassを使う方法もメモしておきます。Sassを使うのであれば、Compassも使いたいですものね!
WebStormや、その他JetBrains製のIDEでも同様の手順で行けると思いますが、確認はしていません。
Sass/SCSS, Compassに関する解説や、環境構築については、LIGさんの記事にまとめられているので、参考にしてみてください。
CSSの常識が変わる!「Compass」、基礎から応用まで! – 株式会社LIG

環境

環境は以下の通りです。前回までと変わりありません。Rubyに関しては、今回も、Macに初めから入っているものを使いました。(最新版にアップデートした上で利用するのが望ましいと思います。)

ソフトウェアバージョン
MacOS10.8.4
PhpStorm6.0.2
Ruby1.8.7
Compass0.12.2

今回も、Windowsでは、試していません。RubyおよびCompassが、インストールできれば良いはずなので、以下の記事を参考に、環境構築をしてみてください。
WindowsにCompassをインストールしてSASS/SCSS環境を構築する – webOpixel

MacにCompassをインストールする

MacにCompassをインストールしましょう。手順は以下の通りです。同時にいくつかのGemがインストールされました。

これでCompassのインストールは完了です。

Compassの初期化

今回のディレクトリ構成は以下の通りです。必要に応じて読み替えてください。

それでは、Compassの初期化を行いましょう。Compassの設定ファイル config.rbに値を与える為に、いくつかオプションを加えました。この通りである必要はありませんし、後から設定ファイルを変更しても良いです。
コマンド入力は、ターミナルを起動しても良いですし、PhpStormでやるのであれば、 Tools > Run Command...からCommand Line Toolsを起動しましょう。ショートカットキーは、 Shift + Command + Xです。

Compass初期化後の構成は、以下の通りです。いくつかの初期ファイル等が生成されました。

PhpStormのFile WatchersプラグインでCSSファイルを自動出力させる

今回もPhpStormのFile WatchersプラグインでCSSファイルを自動出力させます。ただ、Sass/SCSSのときと違って、Compassに関しては、PhpStorm 6のFile Watchersプラグインに、テンプレートが存在しておりませんので、自作する必要があります。
手っ取り早く済ませたい方向けに、設定ファイルをGistに上げておきました。以下よりダウンロードして、File Watchersにインポートしてください。
watchers.xml – Gist

File Watchersプラグインの設定

さて、File Watchersプラグインの設定を行っていきましょう。以下のキャプチャの通り、 PhpStorm > Preferences > File Watchersで、設定を行うことができます。

compass-in-phpstorm-01

Addボタンを押下し、テンプレートを選択します。今回はSCSSをベースに制作します。

compass-in-phpstorm-02

各項目を以下の通りに変更します。

項目名
NameCompass (お好きな名前で)
Programcompass
Argumentscompile
Working directory$FileParentDir$

compass-in-phpstorm-03

Programは、compassのインストールディレクトリ(Mac標準では /usr/bin/compass )を指定しても良いです。
また、Argumentsについてですが、現在の設定だと、scss以下のファイルのどれかに変更があるたびに、scss以下のファイルを全てコンパイルします。編集したファイルのみを対象にコンパイルを実行させたいのであれば、 compile $FileName$と指定しましょう。ただ、一括でコンパイルさせても、ログを見ると、変更したものと、変更してないものを管理しているようなので、あまり気にする必要はないかもしれません。

あとは、scssディレクトリ以下に、scssファイルを作成・編集していくだけで、自動的に同名のCSSファイルが作成・更新されます。HTMLから、そのCSSを読み込むようにしておけば、OKです。

scssファイルを追加した際、以下の通り、ウォッチするかどうかの確認が表示されますが、これは不要ですので、 Dismissを選択しておきましょう。

File watcher ‘SCSS’ is available for this file. Description: ‘Compiles .scss files into .css files’
Add watcher
Dismiss

compass-in-phpstorm-04

以上で完了です。

設定を変更して任意の出力結果を得る

Sass/SCSSの時も同様に設定を行いましたが、任意の出力結果を得たい場合は、設定を変更しましょう。File Watchersの設定画面( PhpStorm > Preferences > File Watchers > Compass)からも、もちろん設定できるのですが、Compassには、設定ファイル( config.rb)があるので、そちらで行った方が一貫性を保てますし、共有もしやすいのでオススメです。

出力スタイルを変更する

例として、出力スタイルをcompressed (minified) に変更してみましょう。 config.rbを以下のように編集します。

他にも様々な設定ができますが、本題から逸れるので、ここまでとします。詳しくは、公式ドキュメントを参照してください。
Configuration Reference – Compass Documentation

補完を有効にする

テンプレートが存在していないことからも想像できると思いますが、残念ながら、一部機能に対応していません。例えば、 @importでPartialを読み込もうとすると、パスが解決できないというWarningが表示されます。Variable, Mixin, Functionも同様にWarningが表示されますし、補完も機能しません。

compass-in-phpstorm-05

コンパイルは問題なくできるので、このままでも使えますが、せっかくなので補完できるようにしてみましょう。補完を有効にする為に、scssディレクトリ以下に、実ファイルを設置するなり、シンボリックリンクを作るなりして、CompassのSCSSファイルにパスを通します。

これで、ほとんどのWarningは表示されなくなり、補完も機能します。

compass-in-phpstorm-06

ただ、Helper Fanctionsだけは、Warningは表示されたままで、補完も機能しません。Helper Fanctionsは、Rubyで書かれているので、どうしようもないのかもしれません。対応方法をご存知の方がいたら、是非ご教示ください!
Helper Functionsの警告を、どうしても止めたいのであれば、 PhpStorm > Preferences > Inspections > SASS/SCSSのチェックを外すという手もありますが、あまりオススメはしません。

PhpStormのCompass対応の今後

ちなみに、JetBrainsによると、Compassは、PhpStorm 7で対応する見込みだそうです。
(PDF) Q&A Webinar PhpStorm 6 – 25th March 2013

投票も呼びかけているので、皆様の声を、ぜひ届けてください。
support for Compass stylesheet authoring system : WEB-5802

また、PhpStorm販売代理店のサムライズムさんによると、PhpStorm 7は、今夏リリース予定だそうです。PhpStormは、1年間の無償アップグレード権が付いているので、今買っても問題ないですね!

以上です。
それでは、PhpStormで快適なCompassライフをお楽しみください。

参考サイト

今回は、Stack Overflowと、海外の方のブログを参考にしました。ありがとうございました。