CompassのCSSスプライト機能をミックスインにする場合はスプライト関数を使用します。これでCSSスプライトのいろいろな値を取得、組み替えができます。
スプライト関数
スプライト関数にもいろいろな種類があります。ここでは主に使用するスプライト関数を紹介します。
prite-map()関数
sprite-map("<map>/*.png", $spacing, $position, repeat, $layout )
CSSスプライト用画像の生成、戻り値は画像のURL。「CompassによるCSSスプライト作成 1」で使用した@import “< map >/*.png”; をsprite-map関数にしたもの。
sprite()関数
sprite(<map>, <sprite>)
背景画像パスと位置を取得。
sprite-file()関数
sprite-file(<map>, <sprite>)
結合前の画像情報を取得。CSSスプライトではimage-width()関数、image-height()関数などと組み合わせて元画像のwidthやheightを取得する。
//結合前の画像からwidthを取得 image-width(sprite-file(<map>, <sprite>)) //結合前の画像からheightを取得 image-height(sprite-file(<map>, <sprite>))
sprite-position()関数
sprite-position(<map>, <sprite>)
背景位置を取得。nth()関数で縦･横のサイズを個別に取得してもOK。
スプライト関数を組み合わせる
紹介したスプライト関数を組み合わせてCSSスプライトのボタンを作ってみます。ボタン用の画像とファイル構成は「CompassによるCSSスプライト作成 1」で使用したものを流用します。
Sass
@import "compass";
$map: sprite-map("icon/*.png", $spacing: 20px, $layout: horizontal);//sprite-map()関数
.youtube {
background: sprite($map, sns03);//sprite()関数
width: image-width(sprite-file($map, sns03));//image-width()関数
height: image-height(sprite-file($map, sns03));//image-height()関数
background-position:sprite-position($map, sns03);//sprite-position()関数
&:hover {
//nth()関数を利用して縦･横を別々に呼び出す
background-position:
nth(sprite-position($map, sns03_hover), 1)
nth(sprite-position($map, sns03_hover), 2);
}
}
ここで指定した<sprite>は「sns03」。images/icon/sns03.pngを指しています。
CSS
.youtube {
background: url('images/icon-s2d341d8611.png') -480px 0;
width: 100px;
height: 100px;
background-position: -480px 0;
}
.youtube:hover {
background-position: -600px 0;
}
HTML
<html lang="ja"> <head> <meta charset="utf-8"> <title>CompassによるCSSスプライト作成</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="youtube"></div> </body> </html>
「CompassによるCSSスプライト作成 1」と同様に、ボタンが表示されているのが確認できました。
スプライト関数ををミックスインにする
スプライト関数でさまざまな値の取得、組み替えができることを確認したのでミックスインにしてみます。
Sass
@mixin sprite-bg($sprite) {
background: sprite-url($map) no-repeat;
background-position:sprite-position($map, $sprite);
width: image-width(sprite-file($map, $sprite));
height: image-height(sprite-file($map, $sprite));
&:hover {
background-position:
nth(sprite-position($map, unquote("#{$sprite}_hover")), 1)
nth(sprite-position($map, unquote("#{$sprite}_hover")), 2);
}
}
.tumbler {
@include sprite-bg(sns05);
}
作成したミックスインに引数「sns05」を持たせて、tumblerクラスにインクルードしてみました。
※hover時のpositionを取得するため、:hover内の$spriteをunquote(“#{$sprite}_hover”)に整形しました。
HTML
<html lang="ja"> <head> <meta charset="utf-8"> <title>CompassによるCSSスプライト作成</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="tumbler"></div> </body> </html>
ミックスインに渡した引数「sns05」から、sns05.pngの情報が参照されてtumblrのボタンが作成されました。
Compassスプライトで、ページ読み込みの高速化と作業時間の軽減を！
コメントを残す