第6章 Sassを更に便利にする Compass

6-6 Compassで簡単CSSスプライト（Compass Sprites）

Compassで簡単CSSスプライト（Compass Sprites）

サンプル画像のダウンロードページへ

@import "<map>/*.png";

@import "icon/*.png";

.icon-sprite {
  background: url('../img/icon-sde4c3f298e.png') no-repeat;
}

背景の位置を書き出す

@import "icon/*.png";
@include all-icon-sprites;

.icon-sprite, .icon-author, .icon-book, .icon-contact, .icon-download, .icon-sample, .icon-top, ul li.top {
  background: url('../img/icon-sde4c3f298e.png') no-repeat;
}

.icon-author {
  background-position: 0 -96px;
}
.icon-book {
  background-position: 0 0;
}
.icon-contact {
  background-position: 0 -128px;
}
.icon-download {
  background-position: 0 -32px;
}
.icon-sample {
  background-position: 0 -64px;
}
.icon-top {
  background-position: 0 -160px;
}

<ul>
	<li><a href="/" class="icon-top">トップ</a></li>
	<li><a href="/about/" class="icon-book">書籍について</a></li>
	<li><a href="/source/" class="icon-sample">サンプルソース</a></li>
	<li><a href="/profile/" class="icon-author">著者プロフィール</a></li>
	<li><a href="/dl/" class="icon-download">ダウンロード</a></li>
	<li><a href="/contact/" class="icon-contact">お問い合わせ</a></li>
</ul>

li {
	list-style: none;
	a {
		display: block;
		padding:5px 0 0 40px;
		height: 32px - 5px;
		font-size: 16px;
	}
}

設定変数

$icon-layout: horizontal;
@import "icon/*.png";

$icon-layout: diagonal;
@import "icon/*.png";

$icon-layout: smart;
@import "icon/*.png";

$icon-spacing:20px;
@import "icon/*.png";

$icon-layout: horizontal;
$icon-spacing: 20px;
@import "icon/*.png";

$icon-spacing: 20px;
$icon-download-spacing: 60px;
@import "icon/*.png";

$icon-position: 50%;
@import "icon/*.png";

$icon-author-position: 100%;
@import "icon/*.png";

$icon-repeat: repeat-x;
@import "icon/*.png";

$icon-clean-up: false;
@import "icon/*.png";

$icon-sprite-dimensions: true;
@include all-icon-sprites;

.icon-author {
  background-position: 0 -96px;
  height: 32px;
  width: 32px;
}
〜
省略
〜
.icon-top {
  background-position: 0 -160px;
  height: 32px;
  width: 32px;
}

@include all-icon-sprites(true);

$icon-sprite-base-class: ".list";

.list {
  background: url('../img/icon-sde4c3f298e.png') no-repeat;
}

マジックセレクタで擬似クラスを作成する

ホバー擬似クラス

$icon-spacing: 20px;
@import "icon/*.png";

$icon-spacing: 20px;
@import "icon/*.png";
@include all-icon-sprites;

.icon-sprite, .icon-author, .icon-book, .icon-contact, .icon-download, .icon-sample, .icon-top {
  background: url('../img/icon-sa76527fd68.png') no-repeat;
}

.icon-author {
  background-position: 0 -468px;
}
.icon-author:hover, .icon-author.author_hover, .icon-author.author-hover {
  background-position: 0 -104px;
}

.icon-book {
  background-position: 0 -312px;
}
.icon-book:hover, .icon-book.book_hover, .icon-book.book-hover {
  background-position: 0 -52px;
}

.icon-contact {
  background-position: 0 -520px;
}
.icon-contact:hover, .icon-contact.contact_hover, .icon-contact.contact-hover {
  background-position: 0 -260px;
}

.icon-download {
  background-position: 0 -364px;
}
.icon-download:hover, .icon-download.download_hover, .icon-download.download-hover {
  background-position: 0 0;
}

.icon-sample {
  background-position: 0 -416px;
}
.icon-sample:hover, .icon-sample.sample_hover, .icon-sample.sample-hover {
  background-position: 0 -156px;
}

.icon-top {
  background-position: 0 -572px;
}
.icon-top:hover, .icon-top.top_hover, .icon-top.top-hover {
  background-position: 0 -208px;
}

アクティブ／ターゲット擬似クラス

$icon-spacing: 20px;
@import "icon/*.png";
@include all-icon-sprites;

.icon-sprite, .icon-top {
  background: url('../img/icon-s690405afc3.png') no-repeat;
}

.icon-top {
  background-position: 0 -156px;
}
.icon-top:hover, .icon-top.top_hover, .icon-top.top-hover {
  background-position: 0 -104px;
}
.icon-top:target, .icon-top.top_target, .icon-top.top-target {
  background-position: 0 0;
}
.icon-top:active, .icon-top.top_active, .icon-top.top-active {
  background-position: 0 -52px;
}

マジックセレクタの設定変数

$disable-magic-sprite-selectors: false;
$sprite-selectors: hover, target, active ;

個別のセレクタにプロパティと値を渡す

背景位置、サイズをまとめて取得する

背景位置のみ取得する

@import "icon/*.png";
//@include all-icon-sprites;

.top {
	@include icon-sprite(top);
}

.icon-sprite, .top {
  background: url('../img/icon-sa76527fd68.png') no-repeat;
}

.top {
  background-position: 0 -572px;
}
.top:hover, .top.top_hover, .top.top-hover {
  background-position: 0 -208px;
}

背景位置とサイズを取得する

.top {
	@include icon-sprite(top, true);
}

.icon-sprite, .top {
  background: url('../img/icon-sa76527fd68.png') no-repeat;
}

.top {
  background-position: 0 -572px;
  height: 32px;
  width: 32px;
}
.top:hover, .top.top_hover, .top.top-hover {
  background-position: 0 -208px;
}

背景位置を調整する

.top {
	@include icon-sprite(top, false, 100px, -100px);
}

.icon-sprite, .top {
  background: url('../img/icon-sa76527fd68.png') no-repeat;
}

.top {
  background-position: 100px -672px;
}
.top:hover, .top.top_hover, .top.top-hover {
  background-position: 100px -308px;
}

サイズを取得する

.top {
	@include icon-sprite-dimensions(top);
}

.top {
  height: 32px;
  width: 32px;
}

幅・高さを別で取得する

.top {
	width: icon-sprite-width(top);
	height: icon-sprite-height(top);
}

.top {
  width: 32px;
  height: 32px;
}

Oily PNGのインストール

gem install oily_png

※Macはコマンドの先頭に"sudo"を付けてパスワードを入力する必要があります。