Compassに依存しない! Sass (SCSS) をちゃんと学ぶ その1

脱Compass Sassを学ぶ - その1

以前の記事で、Sass(SCSS) + Compass を書いておいてアレですが、Compassの最大の問題点である重いことに耐えられなくなってきたので、脱Compassを見据えてネイティブな SCSS を初めからおさらいしたいと思います。

いっそのこと、コーディングが速く済みそうな Sass にしようかと思いましたが、Bourbon が気になるので SCSS で進めて行きます。

とりあえず本家のサイトがこちら

Sass: Syntactically Awesome Style Sheets

現時点でのバージョンは 3.4.13 です。

まずはコンパイルコマンドを押さえておく

脱コンパスを目指すならコマンドを叩く事から逃れられないので、まずはコンパイルするためのコマンドを確認しておきます。
最も単純なコマンドが以下

:(コロン)を境に左側にSCSSファイルを、右側に出力するCSSファイルを指定します。

出力形式オプション

CSSへ出力する際に形式を選択できます。出力形式は以下の4つ。

nested
入れ子の状態がわかるように、インデントで調整したCSSを出力します。

expanded
一般的なCSSの書式です。

compact
1セレクタを1行で出力します。

compressed
不要なスペースと改行を削除し、ファイルサイズを極力抑えて出力します。

compressed が最もファイルサイズを小さくできますが、可読性はかなり低いです。開発時と本番用で使い分けるといいでしょう。
コマンドの指定は –style オプションで行います。

キャッシュ

何も指定せずにコンパイルをすると、同じフォルダ内に .sass-cache という謎のフォルダが作成されます。これはキャッシュファイルといい、時間のかかる処理結果などを保管しておき次回以降のコンパイルをより高速化するためのものです。

短いコードならば一瞬で終わるためキャッシュファイルは邪魔になりますが、大量のコードを処理する場合、コンパイルに10秒以上掛かる場合もあり、そういった場合にはキャッシュは効果的です。

キャッシュファイルを作らないようにするオプションは –no-cache です。

キャッシュフォルダの場所を変更するには –cache-location オプションを使います。

キャッシュのパスは相対パスでも指定できますが、コマンドプロンプトの作業ディレクトリに影響されない絶対パスの方が確実です。

変更を監視して自動的にコンパイルする

編集・保存するたびに毎回コマンドを打つわけにもいかないので、ファイルの変更を監視して自動的にコンパイルするためのオプションが –watch です。

このコマンドにより、style.scss を保存する度に自動でCSSファイルにコンパイルします。

監視中はコマンドプロンプトにエラーや更新といったステータスが表示されます。
監視を停止するには Ctrl+c を押します。

上記の例はファイル単体の指定ですが、フォルダ単位の指定もできます。scssフォルダ内の変更を監視する場合は以下の通りです。

バッチファイルを作成する

コマンドプロンプトを起動して、作業ディレクトリを移動させて、watchコマンドを打って・・・と、毎回やっていられないので、プロジェクトルートにバッチファイルを作成しておきましょう。ファイル名は build.bat にしました。build.bat の内容を以下の様に編集します。

1行目のコマンドで、build.bat の場所を作業ディレクトリとして指定しています。
2行目のコマンドで scssフォルダを監視し、出力するCSSファイルはSCSSファイルと同じではなく、プロジェクトルートへ出力するように指定。さらにキャッシュファイルの作成を無効にしています。
3行目は最終コンパイル用のコマンドをコメントアウトしています。バッチファイルでは、先頭にコロンを2つでコメントアウトになります。

これでSCSSを編集する前に build.bat を起動しておくだけで良くなりました。

モジュール構造を理解する

Compass を利用した場合に、SCSSファイルの先頭あたりに

と書く必要があります。Sassでは、このように @import を使って他の CSS, Sass, SCSSファイルを読み込むことが出来ます。よく使うクラススタイルなどを別のファイルにまとめておいて @import で読み込む、というような使い方ができ、非常に便利です。

このような、CSSファイルへコンパイルする必要はないがライブラリのように使いたいファイルは、ファイル名の先頭に_(アンダースコア)を付ける事によってコンパイル対象から除外されます。よく使うクラススタイルをまとめたファイルならば _my-class-style.scss といった感じです。こうしておけば、ディレクトリ単位でwatchしていても _my-class-style.css というファイルが作成されることはありません。

このファイルをインポートしたいときは次のように @import します。

先頭のアンダースコアと拡張子部分を省略して指定します。

このように @import を使用すれば テーブルスタイル用、メディアクエリ用 などとファイルを分けて管理することができ、最終的には1つのCSSファイルに結合するといった使い方が可能になります。

実に WordPress 向きの使い方ですね。

残るコメント、残らないコメント

Sass(SCSS)ではPHPと同じ2種類のコメントアウトを使う事ができます。//(ダブルスラッシュ)の1行コメントと /* ~~~ */ スラッシュとアスタリスクで挟むコメントアウトです。

コンパイルの出力形式が compressed の場合はどちらも削除されますが、nested, expanded, compact の場合、1行コメントは削除された上で出力されます。これを上手く使い分ければ何かの役に立ちそうな気もします。


今回はここまで。次回は、SCSSの書き方に触れていきます。