CompassのCSSスプライト機能をミックスインにする場合はスプライト関数を使用する。これでCSSスプライトのいろいろな値を取得、組み替えができる。
CONTENTS
スプライト関数
スプライト関数にもいろいろな種類がある。ここでは主に使用するスプライト関数を紹介する。
prite-map()関数
|
1 |
sprite-map("<map>/*.png", $spacing, $position, repeat, $layout ) |
CSSスプライト用画像の生成、戻り値は画像のURL。「CompassによるCSSスプライト作成 1」で使用した@import “< map >/*.png”; をsprite-map関数にしたもの。
sprite()関数
|
1 |
sprite(<map>, <sprite>) |
背景画像パスと位置を取得。
sprite-file()関数
|
1 |
sprite-file(<map>, <sprite>) |
結合前の画像情報を取得。CSSスプライトではimage-width()関数、image-height()関数などと組み合わせて元画像のwidthやheightを取得する。
|
1 2 3 4 |
//結合前の画像からwidthを取得 image-width(sprite-file(<map>, <sprite>)) //結合前の画像からheightを取得 image-height(sprite-file(<map>, <sprite>)) |
sprite-position()関数
|
1 |
sprite-position(<map>, <sprite>) |
背景位置を取得。nth()関数で縦･横のサイズを個別に取得してもいい。
スプライト関数を組み合わせる
紹介したスプライト関数を組み合わせてCSSスプライトのボタンを作ってみる。ボタン用の画像とファイル構成は「CompassによるCSSスプライト作成 1」で使用したものを流用する。
Sass
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@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
|
1 2 3 4 5 6 7 8 9 |
.youtube { background: url('images/icon-s2d341d8611.png') -480px 0; width: 100px; height: 100px; background-position: -480px 0; } .youtube:hover { background-position: -600px 0; } |
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@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
|
1 2 3 4 5 6 7 8 9 10 |
<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スプライトで、ページ読み込みの高速化と作業時間の軽減を！