nyaou.com

CSS フレームワーク Compass の導入から使用方法まで

2013-02-28 22:42:14

はじめに

Compass は Sass（Ruby のライブラリ）を元に作られた CSS フレームワークです。
今回は Compass の導入から、簡単な使用方法までを明記します。
まず、Ruby、Sass、Compass の関係について簡単に説明します。

Ruby、Sass、Compass とは

Ruby はオブジェクト指向スクリプト言語です。要はプログラム言語ですね。
Sass は、Ruby のライブラリの一つで、CSS のメタ言語（メタ言語というのは、その言語を生成するための言語なので、この場合は CSS を生成するための言語を指す）です。
なので、Ruby および RubyGems（Ruby のライブラリ管理ツール）がインストールされている必要があります。
Compass は、Sass を元に作られた CSS のフレームワーク（各アプリケーションに使用する共通ライブラリなどを一元管理し、決められた枠に沿って開発することで、効率的な開発が行える仕組み）です。
なので、Sass がインストールされている必要があります。

Compass で何ができるか

簡単に書くと、これまで何行にも渡って書かなければならなかったベンダープレフィックスを自動生成してくれたり、CSS スプライトを自動生成してくれたりします。

また、Sass の機能も勿論合わせて使用でき、予め定義しておいたスタイルを別のスタイルに読み込ませたり（Mixin）、親スタイルの中に子スタイルを入れ子に書いたりすることもできます。

Rubyのインストール

私は Windows 環境なので、今回は Windows での導入方法を明記していきます。

まず、RubyInstaller から Ruby のインストーラをダウンロードします。
私は Ruby 2.0.0-p0(x64) をダウンロードしました。

インストールを実行します。
途中のチェックボックスはすべてチェックしておくと便利です。
各チェックボックスの説明はマウスを乗せると表示されるので、確認してください。

インストール後、Ruby がインストールされているか確認します。
コマンドプロンプトを開いて「ruby -v」を実行。

ruby 2.0.0p0 (2013-02-24) [x64-mingw32]

のような表示が出てくれば正常にインストールされています。
このインストーラだけで Ruby および RubyGems がインストールされました。

Sassのインストール

コマンドプロンプトで、「gem install sass」を実行する。

Compassのインストール

コマンドプロンプトで、「gem install compass」を実行する。

Compass の設定ファイル等作成

設定ファイル作成の前に、まずは作成する Web サイトの構成ですが、今回は以下のようにしたいと思います。
各ディレクトリは勝手に生成されるので、あらかじめ作る必要はありません。

.
├/css
├/js
├/images
└index.html

次に、Compass 用の設定ファイル等を作成します。
コマンドプロンプトで、「compass create –css-dir “css” –javascripts-dir “js”」を実行。
ここで、オプション –css-dir “css”、–javascripts-dir “js”  は css および JavaScript を保存するディレクトリ名を指定しています。
すると、以下のフォルダ構成ができあがります。

カレントディレクトリ
├/.sass-cache　// sassのキャッシュ保存用ディレクトリ
├/css                   // CSSファイル保存用ディレクトリ
├/js                      // JavaScript保存用ディレクトリ
├/images           // 画像保存用ディレクトリ
├/sass                 // sassファイル保存用ディレクトリ
├config.rb         // compass 設定ファイル
└index.html

ちなみに、オプションを指定しない場合、デフォルトでは以下のディレクトリができあがります。

CSS ディレクトリ = “stylesheets”
sass ディレクトリ = “sass”
画像 ディレクトリ = “images”
JavaScript ディレクトリ = “javascripts”

また、今回は設定ファイル作成時にディレクトリ名を指定しましたが、作成後も「config.rb」を修正することで簡単にディレクトリ名を変更できます。

CSS を作ってみる & ベンダープレフィックス自動生成

生成されたディレクトリ sass に以下の2行を記載したテキストファイルを「style.scss」という名前で保存します。

@import ”compas”;
.sample { @include border-radius(15px); }

次にコマンドプロンプトから、「compass compile sass/style.scss」を実行します。
すると、css ディレクトリに style.css が、以下の内容で出来上がっています。

.sample {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}

今まで煩雑になりがちだった、ベンダープレフィックスが一行で管理できてしまう！！すごい！
ちなみに、scss ファイルの (15px) をまるっと消すと、デフォルト値である 5px が設定されます。

CSS スプライト自動生成

以下の手順で CSS スプライトを自動生成してくれます。
ちなみに CSS スプライトとは、Web サイトで使用しているアイコンなどを一つの画像にまとめて、CSS を用いて画像の表示位置を指定することで、1枚の画像で様々なアイコン表示を可能にする技法のことです。

CSS スプライト用の画像を一つのディレクトリにまとめ、そのディレクトリを images ディレクトリ直下に置く。
ここでは例として、images ディレクトリに sample ディレクトリを作成し、sample ディレクトリに以下3つの画像を入れる。

• edit.png
• new.png
• save.png

scss ファイルに以下の2行を追加する。

@import ”sample/*.png”;
@include all-任意のクラス名-sprites;

「compass compile sass/style.scss」を実行し、出来上がった CSS ファイルを確認すると、「.任意のクラス名-edit」等という名前で、クラス名が出来上がっています。また、images ディレクトリには以下のような CSS スプライト用画像が自動生成されています。

とても便利ですねっ！！

オフィシャルによれば、おおむね32px程度の四角アイコンが適正なようです。
また、png のみの対応っぽいですね。

スタイルのネスト（入れ子）

こちらは Sass の機能となりますが、以下のように親と子の関係を入れ子にして記述することができます。

SCSS ファイル

#menu {
	margin: 0;
	padding: 0;
	width: 100%;

	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;

		li {
		float: left;
		width: 100px;
		}
	}
}

出力された CSS

#menu {
  margin: 0;
  padding: 0;
  width: 100%;
}
#menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#menu ul li {
  float: left;
  width: 100px;
}

この用に、入れ子で記述した部分が、きちんと分割されてCSSとして出力されます。
個人的に入れ子の記載はすごく解りやすく、重宝しそうです。

scss ファイルの監視

ところで、いちいちscssファイルを修正し、コマンドプロンプトから「compass compile sass/style.scss」を実行するのって、とても面倒ですよね。

そういう場合は、コマンドプロンプトで「compass w」と実行することで、scssファイルの監視を行い、scssファイルが保存されたタイミングでcssファイルを生成してくれます、

ちなみにコマンド「w」とは、コマンド「watch」の省略で、設定ファイル config.rb で設定されている sass ディレクトリ以下にあるすべての scss ファイルを監視します。
特定のファイルのみを監視したい場合は「compass watch sass/style.scss」のようにファイル名を指定して監視を行なってください。

また、監視を終了したい場合は Ctrl + C キーを押下。

mixin（ミックスイン）について

最初で少し触れた sass の機能「mixin」について簡単に説明します。

scss ファイルにでてくる「@include」という記述ですが、これは sass の mixin という機能です。
mixin は、恐らくオブジェクト指向プログラミングの mixin に近い事だと思うのですが、簡単に説明すると、「@mixin」で共通 CSS を定義し、「@include」で定義した共通 CSS を呼び出すというもの。

Compass には予め多くの mixin が用意されており、それらを「@import “compass”」という記述で呼び出して、あとは使用したい場所で「@include」を用いて使うことができます。

mixin は勿論自作もでき、簡単に書くと、以下のような形です。

SCSS ファイル

@mixin note-common($color:#333333){
color:$color;
border: 1px solid #b8b8b8;
background-color: #c9c9c9;
}

.note1{
@include note-common(#ffffff);
}

.note2 {
@include note-common(#cccccc);
}

.note3 {
@include note-common;
}

出力された CSS

.note1 {
color: white;
border: 1px solid #b8b8b8;
background-color: #c9c9c9;
}

.note2 {
color: #cccccc;
border: 1px solid #b8b8b8;
background-color: #c9c9c9;
}

.note3 {
color: #333333;
border: 1px solid #b8b8b8;
background-color: #c9c9c9;
}

このように「@mixin note-common」で定義し、呼び出したい箇所にて「@include note-common」を記載すると、その箇所に共通の CSS が出力されていることがわかります。
（note-common は任意の名前であり、好きな名前を使用することができます。)

また、「@mixin note-common($color:#333333)」の （　） 内は引数となっており、引数が必要ない場合はこの丸カッコをまるっと削除します。

（　） 内の「 : 」以降は変数のデフォルト値となり、こちらも必要ない場合は「 : 」以降を削除します。
デフォルト値を定義した場合、例えば .note3 では引数を設定していないので、デフォルト値である「#333333」が設定されています。

mixin は、セレクタやプロパティの重複定義を無くし、非セマンティッククラス（.span1、.span24、などの意味を持たないクラス）を作成することなく、CSS の作成を効率的に行う事ができますので、ぜひ利用していきたい機能です。

最後に

今回は簡単に Compass についてまとめてみましたが、実は Sass だけでも大分便利なものです。
しかしながら、現在一番使用するであろうベンダープレフィックスについては Compass での機能となるため、それだけでもCompass の利用価値というものは高いと思います。

さらに詳細な内容については、「CSSの常識が変わる！「Compass」、基礎から応用まで！」がとても解りやすく解説しているので、ぜひ興味ある方はご一読ください。

Tweet