compassのインストール
compassを利用するにはまずcompassコンパイラをインストールする必要があります。ここではWindows環境にcompassをインストールする方法と、基本的な利用方法について説明をします。compassのインストール
compassは「Ruby」という言語で書かれたアプリケーションです。なのでまずRubyをインストールしなければなりません。
Windows用Rubyのインストールプログラムは下記のサイトからダウンロードできます。
バージョンは1.9.3で大丈夫です。最新の2.0.0などでもかまいませんが（2014/7/16現在）、32bit版と64bit版があるので注意してください。
ダウンロードしたプログラムを実行してインストールします。途中いくつかの質問が出てきますが、「Rubyの実行ファイルへ環境変数PATHを設定する」と「.rbと.rbwファイルをRubyに関連づける」にはチェックをつけてください。そのほかの設定はデフォルトのままで大丈夫です。
次にcompassのインストールを行います。compassはRubyのコマンドである「gem」を使ってインストールをします。
まずWindowsのスタートメニューから「コマンドプロンプト」を起動してください。そして以下のコマンドを打ち込みます。
> gem update --system > gem install compassこれでcompassがダウンロードされ、自動的にインストールされます。ためしにコマンドラインから compass help と打ち込んでみてください。正常にインストールされればcompassのヘルプメッセージが（英語で）表示されます。
compassの使い方
compassを使ってスタイルシートを書くには、最初に「プロジェクトの初期化」をする必要があります。
まず適当な場所にテスト用のフォルダを作ってください。そしてコマンドプロンプトからcdコマンドを使って、そのフォルダをカレントフォルダにします。
たとえばWindows7でデスクトップに「test」フォルダを作ったならば、
> cd c:\Users\user_name\Desktop\test
のようになります。
次にcompassコマンドを使ってプロジェクトの初期化を行います。
> compass create
これでtestフォルダの中に、図のようにいくつかの初期フォルダやファイルが作られます。
- sassフォルダはsassのソースファイルを保存する場所です。中にはcompassのベストプラクティスに従って初期ファイルが作られていますが、不要であれば削除してもかまいません。
- stylesheetsフォルダはコンパイルされたcssが保存される場所です。sassフォルダ内の.scssファイルに対応した.cssファイルが作られています。sassフォルダと同じく不要ファイルは削除しても大丈夫です。
- config.rbはプロジェクトの設定ファイルです。プロジェクト内のフォルダ名などの設定を変えるときなどに、このファイルを編集します。
- .sass-cacheはコンパイル作業用のフォルダです。
config.rbファイルの内容は図のようになっています。
- css出力フォルダの名前を変えるにはcss_dirを編集します。（初期値：stylesheets）
- sassのソースフォルダを変えるにはsass_dirを編集します。（初期値：sass）
- 画像のフォルダを変えるにはimage_dirを編集します。（初期値：images）
- JavaScriptのフォルダを変えるにはjavascripts_dirを編集します。（初期値：javascripts）
- Webサイト上でプロジェクトフォルダの位置を変更するにはhttp_pathを編集します。（初期値：/）
たとえばプロジェクトがhttp://rosie.co.jp/drupal_rosie/sites/all/themes/custom/rosie/testに配置される場合、http_pathは「/drupal_rosie/sites/all/themes/custom/rosie/」となります。
Drupalでcompassを使う場合、compassプロジェクトはテーマディレクトリの中につくることになります。
フォルダレイアウトが図のようになっている場合のconfig.rbファイルは次のようになります。
http_path = "/drupal_rosie/sites/all/themes/custom/rosie/" css_dir = "./" sass_dir = "sass" images_dir = "images" javascripts_dir = "js" // javascripts_dirは実際には使用していません
プロジェクトには初期ファイルが含まれているので、そのままコンパイルすることができます。stylesheetsフォルダ内のcssファイルをすべて削除してから、次のコマンドを実行してみてください。
> compass compile
コンパイルが成功すれば、stylesheetsフォルダの中にsassフォルダ内のソースファイルに対応した新しいcssファイルが作られます。
ここでもう一度、同じようにcompass compileを実行してみてください。コマンドプロンプト画面にはunchanged sass/ie.scssというメッセージが表示されます。実際cssファイルのタイムスタンプは変化しておらず、コンパイルが行われなかったことを示しています。
これはソースファイルがまったく変更されていないので、コンパイルの必要がなかったからです。このようにcompassは変更のあったファイルだけをコンパイルして、作業時間を短縮するようになっています。
Web開発のとき統合開発環境としてEclipse（あるいはAptanaStudio）を使用している人は多いでしょう。ここではEclipseのビルドシステムを使ってcompassをコンパイルする方法を説明します。
最近のWebデザインではメディアクエリを使用したレスポンシブデザインが必須となっています。sassでももちろんメディアクエリはサポートされています。sassならではの拡張がされているので複雑になりがちなメディアクエリもスッキリと書けるようになります。
cssでは背景に画像を指定することが良くあります。普通はbackground-image: url(../images/bg.png); のように書くことでしょう。しかしこの方法ではフォルダレイアウトを変更すると、すべての指定を書き換えなければなりませんし、CMSではこのような相対指定が使えない場合もあります。このような不便を解消するためにcompassでは画像を特別な方法であつかいます。
横方向のレイアウト整合性をとるのがBlueprintなら、縦方向（行間）をコントロールするのがVertical Rhythmです。Blueprintにも行間コントロールの機能はあるのですがあまり使いやすいとは言えません。ここではcompassコアに含まれるVertical Rhythmの使い方を説明します。
compassの魅力のひとつは豊富で実績のあるミックスインが使えることです。ここではcompassコアに含まれるミックスインの概要を紹介します。
sassは従来のcssと互換性のあるスタイルシート言語です。実際、cssファイルの拡張子をscssに変えただけでも立派なsassソースファイルであり、コンパイルをすることができます。なのでcssについての知識があればsassは簡単に覚えることができます。ここではその概要を説明します。
Webページを作成するとき、作業の半分はグラフィックの制作に、残りの半分はCSSの制作に費やされるでしょう。CSSの制作環境は数年前と比べて格段に良くなっているとはいえ、CSSという言語自体はそれほど進歩していません。特にDrupalなどのCMSプロジェクトではセレクタの記述がどんどん長くなる傾向にあり、そのためcssコードの共有や保守がますます難しくなってきています。