昨日から早速使い始めた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つ並んでいる次のような画像のそれぞれのボタンを配置したいとします。

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: ほげほげ;
}