CompassでCSSスプライトを作るテンプレ

CompassでCSSスプライトを作るテンプレ

· by · in

前提

フォルダ構成は下記を前提。

root
├css
├sass
├img
│└icon
│ ├画像.png
│ ├画像.png
│ ├…
└config.rb

config.rb 内の images_dir は img フォルダを指している前提。

Sassの記法

@import "icon/*.png";
$sprites: sprite-map("icon/*.png");
@include all-icons-sprites();
.icon-sprite {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

これでiconフォルダ内の画像結合から個別アイコン用クラスまで一括生成。
あとは要応用。

筆者について

KaBuKi
ゲームとジョジョを愛するファミッ子世代。好きな言葉は「機能美」。
公私ともにWebサービスを作る系男子。
Tags: , ,