MacでPhpStormを使っていて、CompassでSCSSファイルをコンパイルしようとしたらエラーが起きたので、その回避策の次いで使い方も一緒に書いておくことにしました。（WebStormも同様です）

以下の２つが既に行われていること前提で話を進めます。

• SASS/Compassがインストールされている
• SCSS（SASS）ファイルが入っているプロジェクトフォルダをPhpStormで開いている

PhpStormでCompassを動かす

まず、プロジェクトフォルダにconfig.rb（Compass用の設定ファイル）を配置します。そして、config.rbを編集して作業パスを設定します。

例えばプロジェクトが以下のファイル構成だった場合。

このディレクトリ構造ならconfig.rbのパス設定はこうなります。

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"

config.rbを設置したら、「File > Settings…」（Macなら「PhpStorm > Preferences…」）で設定ウインドウを開きます。

左メニューから「Compass Support」を選択し、「Enable Compass support」にチェックを入れます。config.rbが設置されていればチェックを入れると下の2つの項目に自動的にパスが入力されます。

パス指定が入力されたことを確認し、右下の「Apply」を押して適用します。（先にApplyで適用しないと、後に設定するFile Watchersの項目が自動的に設定されません）

次に、左メニューの下に見える「File Watchers」をクリックして、右側に表示される「＋」ボタンを押します。

SCSSファイルなら「compass scss」、SASSファイルなら「compass sass」をクリックします。

上記説明の手順で設定をしていれば、File Watcherは自動的に設定されています。「Show console:」の項目を「Always」にするとエラーが出なくてもコンソール（コンパイルログ）が表示されるようになります。（ちゃんとコンパイルされたか確認したい場合はAlwaysがオススメです）

• 「Arguments:」
• 「Working directory:」
• 「Output paths to refresh:」

の項目がそれぞれ入力されていることを確認し、右下のOKボタンを押してウインドウを閉じます。

最後に、File WatchersをApplyで適用し、OKボタンで設定ウインドウを閉じます。

これでCompassでコンパイルする環境は整いました。SCSS(SASS)ファイルを編集すると、config.rbで指定したCSSフォルダにCSSファイルが吐出されます。

またファイルを編集した時に「File watcher ‘SCSS’ is available for this file. Description: ‘Compiles .scss files into .css files’」とアラートが出ると思いますが、Compassでコンパイルするように設定したので「Dismiss」をクリックして無視します。（これは「SASSのコンパイル機能を使いますか？」というアラートです）

Macでコンパイルする場合の注意点

Mac（OSX）でコンパイルをした時に「You must compile individual stylesheets from the project directory.」というエラーが出た場合。

これはプロジェクトのディレクトリ名に日本語を使っている、もしくは（Windowsでもそうですが）config.rbのパス指定が間違っている可能性があるので確認してみて下さい。