PHPStorm(WebStorm)でのSCSS/Compassの自動コンパイル設定(Mac OS EI Capitan)

メニューの[Prefrerence]からパネルを開く。

コンパスの有効化

978bbc83-13e4-46f0-9e92-b4b34f921207

File Watchersの設定(変更があった場合に自動コンパイルするファイルタイプ関連の設定)

(scss)

52151a2d-060b-460a-9238-b301293c7bd1

(sass)

screen-shot-2016-12-13-at-11-40-19-am

Program : /usr/local/bin/compass
Arguments : compile
Working directory : $FileDir$
Environment variables : (空)
Output paths to refresh : $FileParentDir$/css/$FileNameWithoutExtension$.css

※追記 : sassファイルが多くなって更新時に編集中のファイルのみをコンパイルしたい場合は、Arguments : compile $FileName$ と指定すると良いです。

 

PHPStormでつかってますが、コードヒントが出てくれて便利です。@includeで一覧したり、

screen-shot-2016-12-13-at-11-21-50-am

先頭数文字タイプすると候補が絞込まれて、その引数も見れたり

screen-shot-2016-12-13-at-11-24-54-am

さらに @includeで書いたmixinの部分を Cmd+クリックで compassのソース(mixin)が見れたり。

screen-shot-2016-12-13-at-11-26-51-am

なかなか便利、wordpressなどの関数も数文字タイプで候補に上がったりで便利すぎて
手放せない開発環境になっています。
(Atom,Sublime,Aptanaとかもどうなのか時間があれば調べてみたいがなかなか><)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です