Web
2014年7月18日 (金) 掲載
sass/compassとは
Webページを作成するとき、作業の半分はグラフィックの制作に、残りの半分はCSSの制作に費やされるでしょう。CSSの制作環境は数年前と比べて格段に良くなっているとはいえ、CSSという言語自体はそれほど進歩していません。特にDrupalなどのCMSプロジェクトではセレクタの記述がどんどん長くなる傾向にあり、そのためcssコードの共有や保守がますます難しくなってきています。このような現状に対する有力な手法がsassです。ここではsassとそれを利用したフレームワークであるcompassについて簡単に紹介をします。
sassとは何か
sassは従来のcssを拡張したスタイルシート記述言語です。sassの文法はcss3と互換性があるので、cssを理解している人ならば簡単にsassに移行できるでしょう。さらにsassで拡張された「ネスト記法」や「変数」などを使って、とてもわかりやすいスタイルシートを書くことができます。また「ミックスイン」という機能で既存のライブラリを取り込むことができ、難解な技巧を覚えなくても高度なスタイルシートが書けるようになっています。
sass/compassのコード例。基本的な文法はcss3と同じですが、77行目にあるメディアクエリの書き方や、88行目の@includeなど、sass独自の拡張が行われています。sassを利用するには
sassは「コンパイラ」という形式の言語です。sassを利用するにはまず自分のPCにsassコマンドをインストールしなければなりません。
sassのソースファイルは.sassという拡張子を持ったテキストファイルです。テキストエディタなどを使って作成しsassコマンドでコンパイルすれば、cssファイルが出力されます。
sassのインストール方法は別のページで説明していますので、そちらをごらんください。
compassとは何か
compassはsassを利用したスタイルシートのフレームワーク（土台）です。豊富な機能を網羅したミックスインのライブラリを備えていて、Webページのレイアウト・デザインを強力にサポートします。グリッドデザイン、cssリセット、クロスブラウザなcss3の記述なども、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は簡単に覚えることができます。ここではその概要を説明します。
compassを利用するにはまずcompassコンパイラをインストールする必要があります。ここではWindows環境にcompassをインストールする方法と、基本的な利用方法について説明をします。