固定px値マージンによる汎用グリッド
/*
#styleguide
.grid
固定px値マージンによる汎用グリッド
```
<ul class="grid grid-col-3 grid-margin-20">
<li class="grid-item">
insert something
</li>
<li class="grid-item">
insert something
</li>
<li class="grid-item">
insert something
</li>
</ul>
```
*/
.grid {
$this: &;
@include cf();
&-item {
display: block;
float: left;
}
@for $i from 1 to 12 {
&-col-#{$i} {
#{$this}-item {
width: 100%/$i;
}
}
}
@mixin margin($px) {
margin: 0 (-$px/2);
#{$this}-item {
padding: 0 ($px/2);
margin-bottom: $px;
}
}
@for $i from 1 to 100 {
&-margin-#{$i}px {
@include margin($i + 0px);
}
}
}