SASS(SCSS)自分用スプライトスニペット

標準
$SPRITE_DIR-map: sprite-map("SPRITE_DIR/*.png", $spacing:1px);
$SPRITE_DIR-img: sprite-url($SPRITE_DIR-map);

@mixin SPRITE_DIR($s) {
  background: $SPRITE_DIR-img no-repeat;
  background-position: sprite-position($SPRITE_DIR-map, $s);
  width: image-width(sprite-file($SPRITE_DIR-map,$s));
  padding-top: image-height(sprite-file($SPRITE_DIR-map,$s));
}

@each $sprite in sprite-names($SPRITE_DIR-map){
  .SPRITE_DIR-#{$sprite} {
    @include SPRITE_DIR($sprite)
  }
}
  • SPRITE_DIRは任意のディレクトリ名
  • 下記の.spriteクラスを一緒にあてる
    .sprite {
      display: inline-block;
      overflow: hidden;
      height: 0;
    }

    HTML上ではこんな感じ

    <i class="sprite spritedir-btn"></i>

    Retina(2x)対応版はこちら

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください