Compassの簡単な使い方まとめ

Pocket

compassの簡単な使い方 - Designup
CSSでのスタイリングを強力にバックアップしてくれるSass(scss)とCompass。SCSSの簡単な使い方を紹介したのでここではCompassの使い方を簡単に紹介します。

CompassはSCSSの拡張パックのようなもので、SCSSをもっと便利にしてくれる機能を搭載。どんな機能があるかと言うと、

  • よく使うミックスイン集
  • cssスプライトの自動生成

が主な機能となっています。具体的にはこちらのリファレンスサイトに全て書かれています。

Compass – リファレンス
Compassの簡単な使い方1
結構たくさんあるので、ここでは機能の一部とcssスプライトのやり方についてまとめておきます。

Compassの便利なミックスイン

Compassを使うにはまずインストールを完了させ、scssファイルに

@import "compass"

を書いてインポートしてやる必要があります。

そのあとはセレクタ内で以下のようにインクルードすれば使えるようになります。

#border-radius {
  @include border-radius(25px);
 }
 

ミックスインなので関数名(?)の後ろに値を指定することでセレクタごとに異なったスタイルにすることが可能。ただ、この指定の方法がちょっとややこしいものがあるので最初は難しく感じるかもしれませんね。

どのようなミックスインが使えるかは先ほどのリンク先にあるリファレンスをご覧下さい。

Compass CSSスプライトの使い方

Compassのもっとも使える機能といってもいいくらい(?)に素晴らしい機能がこのCSSスプライトの自動書き出し。もちろん画像の指定も簡単にできるようになります。

スプライトの書き出しは2パターンあり、1つは全ての画像のクラスを作る方法。もう一つはスプライトのイメージだけ作って、セレクタ内でインクルードする方法です。

@import "compass";


/* 
スプライトの作成 

"画像を集めたフォルダ名/*.png";
*/
@import "spr/*.png";



/* 
書き出しパターン1 

全部書き出し
@include all-フォルダ名-sprites;
*/
@include all-spr-sprites;



/* CSS */
.spr-sprite, .spr-google, .spr-mail, .spr-rss, .spr-share, .spr-twitter {
  background: url('/img/spr-s469c0dad28.png') no-repeat;
}

.spr-google {
  background-position: 0 0;
}

.spr-mail {
  background-position: 0 -256px;
}

.spr-rss {
  background-position: 0 -384px;
}

.spr-share {
  background-position: 0 -432px;
}

.spr-twitter {
  background-position: 0 -128px;
}




/* 
パターン2 

セレクタ内で指定
@include フォルダ名-sprite("画像名");
*/


.icon{
    @include spr-sprite("mail");
}


/* CSS */
.icon {
  background-position: 0 -256px;
}

画像もこんな感じでちゃんと書き出されています(Scoutではエラーになってうまくいかなかったので、ターミナルでコンパイルしてみてください)。
compassのスプライトの使い方
このようにCompassを使うことでツールなどを使用しなくても簡単にCSSスプライトを作成することができます。これだけのためにCompassを使うっていうくらい便利ですよね〜。

このあとは・・・

Compassの使い方はこんな感じ。SCSSの使い方はこちらで解説しています。

Sass(scss)の簡単な使い方まとめ

これらを使うにはまずインストールと初期設定をしておきましょう。

Sass(scss)&Compassのインストールと初期設定の方法まとめ

今回の記事はいかがでしたか?参考になったよ!という方はぜひコメントやいいね!をお願いします。