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

6-7 高度なCSSスプライトの使用方法（Sprite Helpers）

スプライト関数（Sprite Helpers）

sprite-map()関数

@import "compass";
$map: sprite-map("icon/*.png", $spacing: 20px, $layout: horizontal);

sprite()関数

.top {
	background: sprite($map, top);
}

.top {
  background: url('../img/icon-s6d95478305.png') -520px 0;
}

sprite-url()関数

.top {
	background: sprite-url($map);
}

.top {
  background: url('../img/icon-s6d95478305.png');
}

sprite-path()関数

.top {
	background: url(sprite-path($map));
}

.top {
  background: url(icon-s6d95478305.png);
}

sprite-file()関数

.top {
	background: sprite-file($map, top);
}

.top {
  background: /Users/impress/compass-folder/img/icon/top.png;
}

.top {
	width: image-width(sprite-file($map, top));
	height: image-height(sprite-file($map, top));
}

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

sprite-position()関数

.top {
	background: sprite-position($map, top);
}

.top {
  background: -520px 0;
}

.top {
	background: sprite-position($map, top);
	&:hover {
		background: sprite-position($map, top_hover);
	}
}

.top {
  background: -520px 0;
}
.top:hover {
  background: -572px 0;
}

.top {
	background: nth(sprite-position($map, top), 1) nth(sprite-position($map, top), 2);
}

.top {
  background: -520px 0;
}

sprite-map-name()関数

.top:after {
	content: quote(sprite-map-name($map));
}

.top:after {
  content: "icon";
}

関数を組み合わせて使う

@mixin sprite-bg($sprite) {
	background: sprite-url($map) sprite-position($map, top) #{"/"} image-width(sprite-file($map, $sprite)) image-height(sprite-file($map,$sprite)) no-repeat;
}

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

.top {
  background: url('../img/icon-s6d95478305.png') -520px 0 / 32px 32px no-repeat;
}

@mixin sprite-half($sprite) {
	background: sprite-url($map) (nth(sprite-position($map, $sprite), 1)/2) (nth(sprite-position($map, $sprite), 2)/2) #{"/"} (image-width(sprite-file($map, $sprite))/2) (image-height(sprite-file($map,$sprite))/2) no-repeat;
}
.top {
	@include sprite-half(top);
}

.top {
  background: url('../img/icon-s6d95478305.png') -260px 0 / 16px 16px no-repeat;
}

sprite-map()関数で使えるミックスイン

spriteミックスイン

//背景を取得する
.top1 {
	@include sprite($map, top);
}
//引数でサイズ、背景位置をまとめて取得できる
.top2 {
	@include sprite($map, top, true, 100, 100);
}

.top1 {
  background-position: -520px 0;
}
.top2 {
  background-position: -420px 100px;
  height: 32px;
  width: 32px;
}

sprite-dimensionsミックスイン

//サイズを取得する
.top3 {
	@include sprite-dimensions($map, top);
}

top3 {
  height: 32px;
  width: 32px;
}

sprite-background-positionミックスイン

//背景位置を取得する（引数で位置を調整する）
.top4 {
	@include sprite-background-position($map, top, 100, 100);
}

.top4 {
  background-position: -420px 100px;
}

sprite-replace-textミックスイン

//画像置換も書き込む（引数でサイズ、背景位置の調整ができる）
.top5 {
	@include sprite-replace-text($map, top, true);
}

.top5 {
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  background-position: -520px 0;
  height: 32px;
  width: 32px;
  background-image: url('../img/icon-s6d95478305.png');
  background-repeat: no-repeat;
}