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

Shunsuke Sawada

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

CANPATHで選べるアイコンを増やしました。
自分史を作るのがまたちょっと楽しくなると思います。
  
Screen Shot 2014-09-10 at 12.10.35 AM
  
で、このCSSを作る方法。
  
まずは画像を用意します。
ひとつのアイコンは40px四方でマージンも合わせるとちょうど50pxになるようにしています。
なのでこの画像は、500px x 350pxになります。保存方法ですが今回はSVGにしました。
Screen Shot 2014-09-10 at 12.15.19 AM
  

scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* -------------------------- */
// 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 % $num) == 0 {
            $column: $i / $num;
        }
        &.#{nth($icon_names, $i+1)} {
            $row: $i - $column * $num;
            background-position: (- $icon-size * $row) (- $icon-size * $column);
        }
    }
}

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

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

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

34
Shunsuke Sawada

おすすめの記事

英語を勉強しながらウェブも勉強するために。
RailsでGemを使わずにTwitterBootstrapを入れたらアイコンが出なかった
1
RailsでTwitterBootstrapを手動で入れる時(LESS編)
2