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()\$マクロを用いる。

software/intellij/phpstorm/file_watcher/compass.txt · 最終更新: 2017/10/24 by ikatakos
CC Attribution 4.0 International
Driven by DokuWiki Recent changes RSS feed Valid CSS Valid XHTML 1.0