読者です 読者をやめる 読者になる 読者になる

MANA-DOT

PIXEL ART, PROGRAMING, ETC.

SASSのmixinでCSSスプライトを簡潔に記述する

昨日から早速使い始めたsass、便利な機能がたくさんあり、またそれらを活用しながらスタイルを記述することで構造化し、整理されて読みやすくなるので早速気に入っています。

ところで、sassのmixinという機能、 便利そうな気はするものの、スタイルシートであまり複雑なことすると逆にわけわからなくなるのではと思い、敬遠していたのですが、新しいスタイルを書いていてCSSスプライトを利用するのに便利だと思ったので、メモがてら書いておきます。

コード

css自体は、「cssスプライト」で検索すると上位に出てくるこちらのサイトcssを参考にさせていただきました。cssスプライトについて詳しく書いてあります。

@mixin sprite($image, $x, $y, $width, $height) {
    width:  $width;
    height: $height;
    display: block;
    overflow: hidden;
    background: $image $x*-1 $y*-1 no-repeat;
    text-indent: 100%;
    white-space: nowrap;
}

引数は前から、利用する画像、部分画像の開始座標x、y、部分画像のサイズwidth、heightです。 これをscssファイルの上の方にでも定義しておいてやります。

使い方

例えば、64px * 20px のボタンが縦に2つ並んでいる次のような画像のそれぞれのボタンを配置したいとします。

buttons

a#button1 {
  @include sprite( url(path/to/img.png), 0, 0, 64px, 20px);
  margin: ほげほげ;
}
a#button2 {
  @include sprite( url(path/to/img.png), 0, 20px, 64px, 20px);
  margin: ほげほげ;
}

こんな感じで、今までは別個に座標やサイズなどなど指定してあげなければならなかったcssスプライトを利用する要素を、「どの画像」の「どの部分画像」を利用するかという、関心事だけ記述すれば良くなり、見た目がすっきりするだけでなくコードを見た時の意味の理解しやすさも向上します。sass便利ですね。

ちなみに、僕はドッターですのでcssスプライトのようにパーツを一つの画像にまとめておいて切り出す手法は、転送効率うんぬんを抜きにしても好きだったりします。

おまけ

WordpressのSyntaxHighlighterはsassには2013年4月現在対応してないようですが、sassの構文がcssにかなり近いため、cssでハイライティングしてあげればこの記事のように良い感じになります。