Sass の使い方: コンパイル編

コンパイル構文

「sass [コンパイル元の Sass ファイル] [コンパイル後のcss名] 」となります。
↓

sass hoge.scss hoge.css

#wrap {
    width: 100px;
    height: 100px;
    h1 {
        font-size: 20px;
    }
    p {
        font-size: 12px;
    }
}

上記の Sass をコンパイルして出来たCSSの内容です。
↓

#wrap {
  width: 100px;
  height: 100px; }
  #wrap h1 {
    font-size: 20px; }
  #wrap p {
    font-size: 12px; }

/*# sourceMappingURL=test.css.map */

コマンドラインでコンパイルを実行した場合、デフォルトで「.css.map」の拡張子ファイルが作成されます。
これはソースマップと呼ばれるもので、Chromeなどでデバッグした際、元のscssファイルの何行目の設定なのか、ということを伝えるためのものです。
ソースマップがあれば、コンパイル元の修正箇所がすぐに分かる、という訳です。
ただし、GulpやGrantなど、タスク管理ツールを使ってコンパイルした場合は、デフォルトではこのソースマップが出力されないこともあります。

コンパイルを常駐化する

「常駐化」をすると、ファイルを保存したタイミングで、自動的にコンパイルされます。
毎回、コマンドをたたかなくて済むので便利ですね。

ソースファイルと CSS ファイルの間はスペースではなく、コロン(:)で指定します。

sass --watch hoge.scss:hoge.css

↓
実行すると、以下のメッセージが出力され、待機状態になります。

>>> Sass is watching for changes. Press Ctrl-C to stop.

ファイルの変更を監視してます、CTRL + C のショートカットで終了できます、という意味です。

常駐化した後、h2 のプロパティを追加して、保存してみました。

#wrap {
    width: 100px;
    height: 100px;
    h1 {
        font-size: 20px;
    }
    h2 {
        line-height: 1.5;
    }
    p {
        font-size: 12px;
    }
}

保存すると、以下のメッセージが出力され、スタイルシートとソースマップが更新されました。

>>> Change detected to: test.scss
      write test.css
      write test.css.map

↓

#wrap {
  width: 100px;
  height: 100px; }
  #wrap h1 {
    font-size: 20px; }
  #wrap h2 {
    line-height: 1.5; }
  #wrap p {
    font-size: 12px; }

/*# sourceMappingURL=test.css.map */

コンパイルの構文スタイルを指定する

さて、入れ子だけでも、常駐化で作成できるとコーディングがはかどるのが分かったと思います。
ただ、出力されたCSSが、いつもの書き方ではない…と何となく居心地の悪さを感じている人もいると思います。

コンパイル後の構文スタイルは、オプションで指定することができます。

sass hoge.scss hoge.css --style expanded

↓
こうすると、見慣れたスタイルになります。

#wrap {
  width: 100px;
  height: 100px;
}
#wrap h1 {
  font-size: 20px;
}
#wrap h2 {
  line-height: 1.5;
}
#wrap p {
  font-size: 12px;
}

/*# sourceMappingURL=test.css.map */

スタイルには以下のものがあります。

• nested: ネストされた状態
• expanded: 手書きに近い
• compressed: スペース、改行、コメントを除いた形式に出力する
• compact: 読みやすさをある程度保持しつつデータサイズが小さくなるような形で出力

実務では、CSSやJSはサイズが小さいほうが表示速度が速いため、 compressed を使うことが多いと思います。
いわゆる「圧縮」された状態になり、可読性は失われますが、コンパイル元のSASSファイルは、CSSで書くよりずっと見通しがよいので問題ないと思います。

次回は、プログラム的な使い方を見ていきます。変数やファイルのインポートなどを扱います。