× 無料のユーザー登録をすると学習状況を管理することができるようになります

【サポート終了】Compass入門 (全7回)

このレッスンの更新・サポートは終了しています

Sass/SCSSと合わせてCSSを更に効率的に記述するためのフレームワーク、Compassについてその使い方を学びます。

このレッスンでは ruby 1.9.3p125 / sass 3.2.3 / Compass 0.12.2 を使用しています。

#01 Compassとはなにか?
2012年11月26日
Compassの公式サイトはこちらになります。
http://compass-style.org/
#03 はじめてのCompass
2012年11月20日
watch を使わずに、その都度手動で Sass を CSS に変換したい場合には以下のコマンドを使います。

compass compile
#04 よく利用するCSSを書いてみよう (1)
2012年11月20日
リファレンスに指定されている「$default-border-radius」などのデフォルト値は、Sass のほうにその名前で変数宣言することにより上書きすることもできます。

@import "compass";

$default-border-radius: 10px;
 
.sample {
    @include border-radius();
}
#07 CSS Spriteを使ってみよう
2012年11月26日
CSSスプライトの概要は以下の「Webクリエーターボックス」さんのエントリーがわかりやすいです。メリット、デメリット、CSSスプライトに対応した画像の作り方が詳細に説明されています。
http://www.webcreatorbox.com/tech/css-sprite/
またCSSスプライトは速度が重要になるGoogle検索でも使われています。Google検索関連で読み込まれる画像は次の一つですが、すべて以下の一枚にまとめられているのがわかります。
http://www.google.co.jp/images/nav_logo8.png