アイコンとかに便利なSassの書き方

CSS Spriteでアイコンを表示させるってのは良くやるけども、
意外にもSassで書いたのは初めてだったので、メモ。

CANPATHで選べるアイコンを増やしました。
自分史を作るのがまたちょっと楽しくなると思います。
　　

　　
で、このCSSを作る方法。
　　
まずは画像を用意します。
ひとつのアイコンは40px四方でマージンも合わせるとちょうど50pxになるようにしています。
なのでこの画像は、500px x 350pxになります。保存方法ですが今回はSVGにしました。

　　

/* -------------------------- */
// define icon
/* -------------------------- */
$icon-size: 50px;
.icon {
    display: inline-block;
    width: $icon-size;
    height: $icon-size;
    background-image: url('YOUR_ICON_PATH.svg');
    background-repeat: no-repeat;
    background-position: 0 0;
    $column: 0;
    $row: 0;
    $num: 10;
    $icon_names: (
        "none", "flag", "paperplane", "writing", "plane", "school", "job", "foot", "jewel", "shakehands",
        "heart", "star", "music", "bulb", "comment", "lightning", "flag-2", "bomb", "alert", "lock",
        "battery", "writing-2", "painting", "painting-2", "sun", "cloud", "rain", "money", "cart", "present",
        "letter", "scissors", "flower", "sign", "map", "compass", "earth", "phone", "checkbox", "feet",
        "walk", "skateboard", "bicycle", "moterbike", "moterbike-2", "car", "car-2", "ship", "plane-2", "rocket",
        "island", "passport", "trophy", "sandglass", "book", "flag-3", "tube", "warning-2", "speedmeter", "bag",
        "game", "karaoke", "movie", "sound", "camera", "photo", "mobile", "computer", "note", "note-2"
    );
    @for $i from 0 to length($icon_names) {
        @if ($i % 10) == 0 {
            $column: $i / 10;
        }
        &.#{nth($icon_names, $i+1)} {
            $row: $i - $column * $num;
            background-position: (- $icon-size * $row) (- $icon-size * $column);
        }
    }
}

　　

icon-size：アイコンのマージンを含めた大きさ
num：1行のアイコン数
icon_names：各アイコンのクラス名
　　

<i class="icon camera"></i>

　　
とかやればOKなはず。
実装はここで見られます。