Skip to content

Instantly share code, notes, and snippets.

@shirokuro331
Created November 21, 2012 00:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shirokuro331/4122358 to your computer and use it in GitHub Desktop.
Save shirokuro331/4122358 to your computer and use it in GitHub Desktop.
watch について

watch について

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 だけの機能ってわけじゃない。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment