scss ファイルを編集したら自動でコンパイルしてくれる便利なやつ。
単体のファイルをコンパイルするだけなら
$ compass compile sass/screen.scss
で、css フォルダへコンパイルした screen.css ができあがる。
でもいちいちそんな面倒なことはしたくないし、たぶん誰もしないと思う。
scss ファイル編集したら自動でコンパイル(監視)してくれるコマンドは下記。
$ compass watch sass/screen.scss
こうすれば screen.scss が編集されれば、自動的に css フォルダへ screen.css を書きだしてくれる。
というか、ひとつひとつのファイル指定するのも面倒なので、
$ compass w
だけでOK。 これで同じ階層にある sass フォルダの中身を全部 css フォルダへ書きだしてくれる。
少し話を脱線して、Sass で同じ事やろうと思うと
$ sass --watch sass:stylesheets
ってコマンド打たないとといけないと思うので、Sass でやるよりも、compass のほうがちょっと手間を削減できる。
(というか、Sass でももっと短く書けたりする?)
話を compass へ戻す。
@import で読み込みしている scss ファイルは書きだしたくない場合は、ファイルの頭に『_(アンダースコア)』をつける。
例:
sass
├ print.scss
├ hoge.scss
├ screen.scss
を $ compass w で書き出すと
stylesheet
├ print.css
├ hoge.css
├ screen.css
となる。
でも、hoge.scss は screen.scss 内で @import されているファイルなので、本当は css ファイルとして書きだされたくないときもある。
その場合は前記の通り『_(アンダースコア)』をつける。
例:
sass
├ print.scss
├ _hoge.scss
├ screen.scss
を $ compass w で書き出すと
stylesheet
├ print.css
├ screen.css
となる。
メンテンナンス性を考慮して、コンテンツごとの css とか分けたいけど、そうした場合、余計なHTTPリクエストが発生しちゃうので、できればひとつの css にまとめたい時とかによい。でもこれは compass だけの機能ってわけじゃない。