CompassでCSSスプライトを簡単につくる[Rails, Compass, CSS Sprite]

Compass SCSS SASS Ruby on Rails

Compassを使ってCSSスプライトを作る手順です。

以下の記事を参考にさせていただきました。

まず、CSS Spriteでまとめたい画像をimagesの中に保存します。 あとはSCSSを下記のように。

@import "icons/*.png";
@include all-icons-sprites;

画像ごとにクラスが用意されて使えるようになります。 また必要に応じでwidth,heightを指定します。

@import "icons/*.png";
@include all-icons-sprites;

.icons-info {
  height: image-height('icons/info.png');
  width: image-width('icons/info.png');
}

これを一つ一つ書いていくのが面倒だったので処理をまとめてみました。

$map: sprite-map("icons/*.png");
$icons: comment, flow, info, list, lock, point, tel;

.icon {
  background: sprite-url($map) no-repeat;

  @each $icon in $icons {
    &-#{$icon} {
      @include sprite-dimensions($map, $icon);
      background-position: sprite-position($map, $icon);
    }
  }
}

$iconsの配列に新たに追加したアイコンの名前を追加するだけで自動で増やすことが出来ます。