Compassを使って効率的にCSSを書こう！！

前回、Sassとは？というお話を書きました。
次はSassのインストールと使い方を書こうかと思いましたが、インストールの前に、Compassのご紹介。
CompassをインストールすればSassのインストールもできるので、Compassのご紹介をしてからインストールや使い方というお話をしようと思います。

ちなみに前回のSassのお話はコチラ。

Sassで効率的なCSSコーディング！今さらだけど便利なSassについて

Compassってなぁに？？
Compassって何ができるの？？
- ベンダープレフィックス等の複雑なCSSを簡単に書く事ができます
- CSSスプライト画像を生成できます
Compassのデメリット
- コマンドラインの使用が必要
- 管理するファイルが増える

Compassってなぁに？？

Compassは、オープンソースで作られているCSSのフレームワークになります。
Sassのお話の際、ミックスインというものをご紹介しました。
このCompassを使えば、既に用意されているミックスインを使えたり、ベンダープレフィックスなど煩わしいCSSを簡単に書けるようになります。
なので、コードが少なく済み、見やすくメンテしやすいというメリットが得られます。
フレームワークというと少し導入や使えるようになるまでに時間がかかるのではと思いますが、そこまで難しいものでもなく、かなり便利になるのでぜひ導入したいフレームワークです！

Compassを使うには、
1.Compassをインストール
コマンドラインから『gem install compass』

2.プロジェクトの新規作成
コマンドラインから『compass create (プロジェクト名)』
※作業ディレクトリに移ってから！『cd ～』ってやつで参照ディレクトリを作業ディレクトリに移してからになります。

3.自動変換できるようにしておく
コマンドラインから『compass watch』

4.フレームワークを読み込む
scssファイルで『@import “compass”;』

という手順になります。
詳しい使い方は、次回図解を入れて導入から書いていきたいと思います。

Compassって何ができるの？？

ひとことで言うと、CSSを簡単に作れます～という事になりますね。
先程少し挙げたものと、その他できる事を詳しく見ていきます。

ベンダープレフィックス等の複雑なCSSを簡単に書く事ができます

Compassで用意されているCSS3のミックスインを使えば、ベンダープレフィックス等面倒なCSSが、とても簡単でわかりやすいコードで済むようになります！

○.scssでの記述
[css] @import “compass”;
div{
@include inline-block;
@include box-shadow( 0 0 10px #ccc);
@include opacity(.8);
}
[/css]

○コンパイルで生成される.css
[css] div{
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
-webkit-box-shadow: 0 0 10px #ccc;
-moz-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
}
[/css]

とっても短いコードで済んでるのがわかりますね。
制作時もそうですが、変更等あった際の編集がとても効率的だと思います。

CSSスプライト画像を生成できます

小さな画像を1枚にまとめてポジションプロパティで表示させたいところだけを表示させる事で画像読み込みのリクエストを減らし、速度の向上とメンテナンス性の向上が行えるCSSスプライト。
ただ、画像を1枚に統合するのも、表示位置の調整も若干面倒ですよね。

Compassを使えば、なんとこの作業が楽々できちゃいます♪
それもCSSスプライト化したい画像を入れたフォルダーを作成して、指定するだけ！
1枚の画像を生成し、background-position・width・heightの指定まで作ってくれます。
例として、spriteというフォルダーを作り、以下のようなアイコンを入れたとします。
img/sns/fb.png
img/sns/tw.png
img/sns/gp.png
img/sns/hb.png

○.scssでの記述
[css] @import “sns/*.png”;
@include all-sns-sprites;
[/css]

○コンパイルで生成される.css
[css] .sns-sprite, .sns-fb, .sns-gp, .sns-hb, .sns-tw {
background-image: url(‘/img/sns-s3a295def20.png’);
background-repeat: no-repeat;
}

.sns-fb {
background-position: 0 0;
}

.sns-gp {
background-position: 0 -30px;
}

.sns-hb {
background-position: 0 -60px;
}

.sns-tw {
background-position: 0 -90px;
}
[/css]