PhpStorm + Compassで自動cssコンパイル
cssを、より楽に、記述量が少なく書けるように定義された「Sass」や「SCSS」という言語があり、cssにコンパイルして使う。
そのSassを元にして、ベンダプレフィックスや、画像ファイルの処理などの機能をまとめたフレームワークが「Compass」。
Ruby上で動く。Compass自体に、Sass→cssのコンパイラが含まれている。
前準備
rubyとgemのインストール
compassのインストール
プロジェクトの設定
変換元sassフォルダ、変換先cssフォルダ、画像フォルダなどプロジェクトのディレクトリ構造を決める
プロジェクトルートにconfig.rb作成。設定を行う
project_path = "プロジェクトルート(config.rbのあるディレクトリ)までの絶対パス" sass_dir = "src/sass" # 変換元sassのあるフォルダ css_dir = "src/css" # 変換先scssのあるフォルダ images_dir = "img" http_stylesheets_dir = "css" # http上でのcssのあるフォルダ output_style = :compressed # 圧縮して出力
project_pathについては、本来自動的にconfig.rbのあるディレクトリに設定されるはずなんだけど、PhpStormで実行する際にはなぜか明示的に設定してやらないと下記のエラーが出て上手くいかない。下記のエラーは、config.rbのパス設定が上手くいっていないときに出る。
Individual stylesheets must be in the sass directory.
PhpStormの設定
Compassの有効化
Settings ⇒ Languages & Frameworks ⇒ Stylesheets ⇒ Compass ⇒ Enable Compass support にチェック
Rubyにパスが通っていれば、Compass executable file に自動的に実行ファイルへのパスが入る。
プロジェクト内にconfig.rbがあれば、Config path に自動的にそれへのパスが入る。
File Watchersの設定
Settings ⇒ Tools ⇒ File Watchers
右欄の[+]から、Compass Sass または Compass SCSSを選択。SassとSCSSのどっちで書いたかに依る。
Scopeは適当に自分のプロジェクト内でsassファイルが置かれた場所を作成。
Programは自動的に入ってるはず。
Argumentsは、「compile (config.rbのあるフォルダの絶対パス) (コンパイルするsassの絶対パス) 」。config.rbをPhpStormでのプロジェクトルートに作ったなら、\$ContentRoot\$が使える。また、コンパイルするsassの絶対パスは、バックスラッシュ“\”がrubyではエスケープ文字に解釈されてしまうため、“/“に変換する\$UnixSeparators()\$マクロを用いる。
