[CSS][マークアップ] bourbon x neatを使わないでグリッド間のmarginをきちんと固定する。

neatをつかわないで、マージンを固定したグリッドデザインクラスを手早く用意する。

neatはグリッドごとのマージンを宜しく計算してくれて便利だが、
マージンを任意のpxなどで固定させようとすると結構苦心する。

そのためneatを使わないで、下記のような自作のgridクラスを使用している。

layout/grid.sass

@import bourbon

=grid-base-designated-margin($column-num, $margin)
  margin-left: -($margin/2)
  margin-right: -($margin/2)
  &>*
    +clearfix //bourbonのmixin
    &>*
      float: left
      display: block
      width: percentage(1/$column-num)
      margin-bottom: 10px
      &>*
        padding: 0 $margin/2

// preset grids no-margin-type
.grid-auto-m10--10column
  +grid-base-designated-margin(10, 10px)

.grid-auto-m10--7column
  +grid-base-designated-margin(7, 10px)

.grid-auto-m10--5column
  +grid-base-designated-margin(5, 10px)

.grid-auto-m10--4column
  +grid-base-designated-margin(4, 10px)

.grid-auto-m10--3column
  +grid-base-designated-margin(3, 10px)

.grid-auto-m10--2column
  +grid-base-designated-margin(2, 10px)

htmlの使用例は以下。

.grid-auto-m10--3column
  %ul
    %li
      .inner
        うんこ
    %li
      .inner
        うんこ
    %li
      .inner
        うんこ

若干、ネストが深いのだが。
マージンが10pxを保ったまま、整頓される。

ちなみにneatを使って超手早くやりたい場合はこっち。
http://qiita.com/hanzochang/items/1687dd08407b85582885