Slide 43
Slide 43 text
2. Sassをうまいこと使う
@mixin pixelize($size, $matrix, $colors) {
$ret: "";
@for $i from 1 through length($matrix) {
$row: nth($matrix, $i);
@for $j from 1 through length($row) {
$dot: nth($row, $j);
@if $dot != 0 {
@if $ret != "" {
$ret: $ret + ",";
}
$color: nth($colors, $dot);
$ret: $ret + ($j * $size) + " “
+ ($i * $size) + " " + $color;
}
}
}
width: $size; height: $size;
box-shadow: unquote($ret);
}
$colors: (#fff, #444, #f22426, #842300);
$heart: (
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,2,2,2,0,0,0,0,0,2,2,2,0,0,0),
(0,2,3,3,3,2,0,0,0,2,3,3,4,2,0,0),
(2,3,1,1,3,3,2,0,2,3,3,3,3,4,2,0),
(2,3,1,3,3,3,3,2,3,3,3,3,3,4,2,0),
(2,3,3,3,3,3,3,3,3,3,3,3,3,4,2,0),
(2,3,3,3,3,3,3,3,3,3,3,3,3,4,2,0),
(2,3,3,3,3,3,3,3,3,3,3,3,3,4,2,0),
(0,2,3,3,3,3,3,3,3,3,3,3,4,2,0,0),
(0,0,2,3,3,3,3,3,3,3,3,4,2,0,0,0),
(0,0,0,2,3,3,3,3,3,3,4,2,0,0,0,0),
(0,0,0,0,2,3,3,3,3,4,2,0,0,0,0,0),
(0,0,0,0,0,2,3,3,4,2,0,0,0,0,0,0),
(0,0,0,0,0,0,2,4,2,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
);
.nes-icon.heart {
@include pixelize($size, $heart, $colors)
}
うまいことbox-shadowを⽣成してくれるmixin アイコンの実装