Stylus Generated Grid System

grid.styl

makeGridWidth(a, b)
  c=round((b/a)*10000)/100
  unit(c,'%')
  
// partial are the column sizes
// whole is the entire column width size
// so to do a 50% > .g-1-2, a 33% > .g-1-3
// feel free to modify these numbers as needed
.grid
  width:100%
  for whole in 1 2 3 4 5 6
    for partial in 1 2 3 4 5
      if ( whole > partial )
        sel = '.sg-'+partial+'-'+whole
        end = ':nth-of-type('+whole+'n)'
        next = ':nth-of-type('+whole+'n + 1)'
        last = ':nth-last-child(-n+'+whole+')'
        {sel}
          width makeGridWidth(whole,partial)
          &{end}
            // last in column
            padding-right 0
          &{next}
            // first in column
            padding-left 0
            padding-right gridGutter
          &{last}
            // final row don't apply margin
            margin-bottom 0
  [class*='sg-']
    float: left
    padding-left gridGutter
    padding-right gridGutter
    margin-bottom gridGutter*2
    &:last-of-type
      padding-right: 0
    &:first-of-type
      padding-left: 0
      padding-right gridGutter
  &:after
    //clear fix
    content: '';
    display: block;
    clear:both
  .sgfull
    width:100%
  .sgcenter
    margin 0 auto
    float none