PhpStorm

【PhpStorm】簡単にCSSを作成する『SCSS + Compass』 のビルド環境作成

この記事の所要時間: 123

scssは、変数が定義できるので、全体的な色の設定をする時に便利です。
また、その他CSSの設定も簡単に行うことが出来ます。
PhpStormだと簡単に設定が出来るのでまとめてみました。

Compassの実行情報の設定

setting > Languages & Frameworks >  stylesheets > Compass をクリックします。
Enable Compass supportをチェックします。
「Compass.bat」 及び 「Config.rb」の格納先を設定します。

config.rb

File Watchersの設定

Tools > File Watchersをクリックします。
+ボタン Compass SCSS をクリックします。

Edit Watchersの設定

 項目  設定内容
File type SCSS
Scope Project Files
Program compassの格納先
Arguments compile
Output paths to refresh $FileParentDir$/css/$FileNameWithoutExtension$.css
Working directory $FileParentDir$

コメントを残す

*