アイコンとかに便利なSassの書き方
CSS Spriteでアイコンを表示させるってのは良くやるけども、
意外にもSassで書いたのは初めてだったので、メモ。
CANPATHで選べるアイコンを増やしました。
自分史を作るのがまたちょっと楽しくなると思います。
で、このCSSを作る方法。
まずは画像を用意します。
ひとつのアイコンは40px四方でマージンも合わせるとちょうど50pxになるようにしています。
なのでこの画像は、500px x 350pxになります。保存方法ですが今回はSVGにしました。
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なはず。
実装はここで見られます。