Compassを使ってSassのCSS出力を手軽にしよう

Sassを使っていて1つ面倒なことと言えば、CSSを生成するのに必要なコマンドではないでしょうか。

sass -t expanded _scss:shared/css --watch

長い...。プロジェクトでCSSの設計を始めるたびにこれだけ入力するのは大変です。

そこで登場するのが「Compass」です。CSS3のmixinなどが含まれた強力なフレームワークなのですが、次のコマンドを打つだけでCSSの出力ができる機能も持っています。

compass watch

簡単ですよね。いつでもどのプロジェクトでも「compass watch」ですから。

1度だけCSSを出力する「compass compile」もあります。

インストール方法

Sassはもう既に入っていると思うので、次のコマンドを入力してCompassをインストールしましょう。

Windows

gem install compass

Mac

sudo gem install compass

初期設定

本当はプロジェクト毎に次のようにコマンドを打って初期化するのですが...、長いし、勝手に.scssや.cssが出力されて、はっきり言って面倒です。

compass create --sass-dir "（SCSSの保存場所）" --css-dir "（CSSの出力場所）"

そこで、下記コードをコピーして、サイトのルートディレクトリに「config.rb」という名前で保存して下さい。

http_path = "/"
css_dir = "shared/css"
sass_dir = "_scss"
images_dir = "shared/images"
javascripts_dir = "shared/js"
output_style = :expanded
line_comments = false

一応内容を下記に解説します。保存場所など適宜書き換えて下さい。

http_path = "/"
css_dir = "CSSの出力場所"
sass_dir = "SCSSの保存場所"
images_dir = "画像の保存場所"
javascripts_dir = "JavaScriptの保存場所"
output_style = Sassの出力形式（:expanded or :nested or :compact or :compressed）
line_comments = CSSにSCSSの行番号を出力するか（true or false）

2011年12月25日追記

images_dirは、"/"を指定しておくのが便利かもしれません。image-width()で画像サイズを自動取得させる際などに、どこのディレクトリに画像を格納しても引数でサイトルートからのパスを指定すれば意図通りサイズが自動挿入されるようになります。

"shared/images"にすると、shared/images以下に画像を格納する必要があります。

作業開始

もう準備は整いました。コマンドプロンプトやターミナルでサイトのルートディレクトリを開いて、すかさず「compass watch」しましょう。

別のプロジェクトでCompassを使いたい場合は、「config.rb」をそのまま使い回せばOKです。各種ファイルの格納ディレクトリやルートディレクトリが異なる場合のみ、必要な部分を書き換えましょう。

サイトのルートディレクトリをコマンドラインで簡単に開き、compassを実行する方法

2012年1月12日 Macのシェルスクリプトに関する説明を追記しました。

Windows・Mac共に、「バッチファイル」や「シェルスクリプト」を利用すると簡単です。Macの場合、Coda等のアプリケーションを使う手もあります。

Windowsの場合

「compass watch」とだけ書いたファイルを、「compass_start.bat」という名前でconfig.rbと同じディレクトリに置くと良いと思います。ダブルクリックすると目的のディレクトリに移動した状態でコマンドプロンプトが開始され、.scssの変更が監視されます。

Mac

PathFinderを使っている方は「パスナビゲーター（ディレクトリが表示されるところ）」で右クリックをして「ターミナルを開く」、Codaならサイト定義をした上で「ターミナル」をクリックして「ローカルシェルに接続」を選択して接続をクリック、など何かツールを使っていれば簡単に開けると思います。

ツールがない場合は、下記の内容を「compass_start.command」という名前でconfig.rbと同じディレクトリに置きます（右クリックをして「情報を見る」を選択し、オーナーに実行権限を与えて下さい）。ダブルクリックをするとターミナルが開き、.scssの変更が監視されます。

#!/bin/bash
htdocs=$(dirname $0)
cd $htdocs
compass watch

compass_start.commandを実行した時の画面

カレントディレクトリへの移動方法は、Macのバッチファイルを参考にさせて頂きました。

おわりに

「Less & Sass Advent calendar 2011」に関連した投稿を読ませて頂いて、SassがLessの簡便さに負けそうなので、Sassも一度準備は必要だけど簡単だよということを書いてみました。これを読んでSassが少しでも簡単に使えるようになれば幸いです。

ちなみに私も「Less & Sass Advent calendar 2011」に参加しており、2011年12月17日（土）に「Sassで出力するCSSファイルを自社のCSS記述ルールに合わせるヒント」と題してお送りする予定です。まだ周りのみんなSassを使っていないけど自分はSassを使いたい！という方に役立つのではと思います。こちらも楽しみにしていただけたらと思います。