あと味

たくさん情報を食べて、たくさん発信すると、あとになって味わい深い。

watchオプションの使い方

Sass

Less & Sass Advent calendar 2011の11日目です。

Sassは自分がコーディング担当の案件は、確実に使っているのですが、まだまだ表面的な使い方しかできてないのかなと、Advent Calendarの他の記事を見ると感じます。

さて、Sassを使ってCSSを書いていく時には、ほぼ例外なく、watchオプションのお世話になることと思います。

弊社のデザイナーのやり方などを見ると、イマイチ理解して使ってない感じもしたりしたので、少し細かく説明する記事があってもいいのかなと思って、この記事を書くことにしました。

知ってる人には当たり前すぎて、得るものがないかもしれませんが、その点はご了承下さい...

watchオプションとは？

Sassはfilename.sassまたは、filename.scssを使って、Sassの記法、もしくはSCSSの記法で書いたファイルを、コマンドラインを使ってfilename.cssにコンパイルするという方法で、CSSファイルを作ります。（以後、SCSSの記法を使うことを前提で書きます）

その際、SCSSファイルを更新するたびに、毎回コンパイルし直すという手順が非常に面倒なので、ファイルの更新を監視し、更新があれば、自動でコンパイルしてくれる、watchオプションが非常に役に立ちます。

watchオプションの使い方

Sassのリファレンスにwatchオプションの指定方法が書いてある他、Unixのコマンドラインツールの多くは、コマンドラインオプションを、

commandname --help

と入力することで確認することができます。

Sassの場合も、

sass --help

と入力することでSassのコマンドラインオプションをすべて確認することができます。*1

watchオプションの項目を見ると、

sass --watch input.sass:output.css
sass --watch input-dir:output-dir

というコマンドが確認できます。

どちらも、変換元と変換先をコロンで区切る形でオプション引数を指定することがわかります。

SCSSファイルの作り方

人それぞれかもしれませんが、SCSSファイルは用途やページによってファイルを分けることが一般的なのかなと思います。

@importが強力で、CSSの@importルールと違い、Sassの@importはインポートするファイルを一つのファイルに結合してくれます。

Webサイトパフォーマンスの改善が流行った時期に、CSSの@importはHTTPコネクションが多く発生してしまうからやめましょうという流れがあって、@importを使うことを消極的にしていた方もいらっしゃると思いますが、SCSSの@importはガンガン使っちゃっても最終的に一つのファイルに結合されるのでガンガン使っちゃって問題ありません。

ファイルの監視とフォルダの監視

watchオプションは、ファイルの監視とフォルダの監視があると述べましたが、上述のSCSSファイルの作り方に書いたように、複数のファイルを@importで結合する場合、ファイル単位の監視ではちょっと厳しくなってきます。

例えば、以下のような場合、

/* /scss/style.scss */
@import "hoge.scss";
@import "fuga.scss";

ファイル単位の監視をすると以下のようなコマンドになるかと思います。

sass --watch scss/style.scss:css/style.css

この時、せっかくwatchオプションで監視していても、hoge.scssやfuga.scssを更新しても、style.scssの更新をしたことにはならないので、style.cssが新たにコンパイルされることはありません。

なので、基本的にはフォルダの監視がオススメです。

同じ例で、フォルダ単位の監視をすると以下のようなコマンドになります。

sass --watch scss:css

フォルダ名を指定すると、watchオプションは、監視元フォルダに指定したフォルダに保存されている.scssと.sassを探して、ファイルの更新を監視してくれます。

先ほどのファイルの監視では、hoge.scssやfuga.scssを更新しても、監視対象に含まれていなかったので、style.cssが新たにコンパイルされることはありませんでしたが、このフォルダの監視であれば、hoge.scssやfuga.scssを更新すると、style.cssが新たにコンパイルされます。

アンダースコア付きファイル名について

ただ、上記に関して、1点問題があります。

それは、hoge.scss、fuga.scssも、それぞれ、hoge.css、fuga.cssにコンパイルされるということです。

style.cssは、最終的にHTMLで読み込むCSSファイルですが、hoge.css、fuga.cssは、style.cssに結合されていれば良く、無駄な中間成果物かもしれません。

Sassでは、そのケースを解決するために、Partialsという仕組みを用意しています。

hoge.scssや、fuga.scssのように、@importで結合はするが、CSSファイルにコンパイルする必要がないファイルについては、_hoge.scss、_fuga.scssと、ファイル名の先頭にアンダースコアを入力しておくことで、コンパイルされないSCSSファイルにすることができます。

この際、アンダーバーを付けたからといって、

/* /scss/style.scss */
@import "_hoge.scss";
@import "_fuga.scss";

とする必要はありません。

さらに言うと、sassファイルまたは、scssファイルの場合は、拡張子も省略できます。

/* /scss/style.scss */
@import "hoge";
@import "fuga";

なので、上記のような指定をすれば結構です。

まとめ

では、まとめです。

  1. Sassのwatchオプションは、ファイル単位の監視とフォルダ単位の監視があるが、フォルダ単位の監視がおすすめ。
  2. 結合元のscssファイルで、cssとして使用することがないファイルはファイル名の先頭にアンダースコアを付ける

リファレンスに書いてあることですが、始めたての頃の自分や、身近な人が理解できてないようだったので、少し丁寧に説明してみました。

Sassは、一度使い出すとなくてはならないツールになると思うので、まだの方はぜひお試しください。

オマケ

個人的には、このくらいのコマンドラインの操作はできるようになった方がいいと思うのですが、どうしてもコマンドラインツールが難しい方は、GUIツールでwatchする方法もあります。

まだ使ってはいないのですが、CompassというSass向けのCSSフレームワークがあって、そのCompass用にGUIツールがあるようです。

どうしても難しいという方は、上記のツールを使うのもありなんじゃないでしょうか。

アプリをつかうかどうかは置いておいて、個人的にCompassは今後使っていこうかなとは思っています。現状、SassとYUIと組み合わせていますが、Sassに最適化されたCompassの方が良いのかもしれませんし、調べてみます。

LESSにもLESS.app For Mac OS Xというアプリがあるみたいです。

LESSは使ったことないですけど、Sassに比べて大きなアドバンテージがあったら触ってみようかな。

*1:最近のバージョンからか、今まで気づかなかっただけなのか、scssってコマンドもあるみたいですね。使い方はsassコマンドと同じです。