百分比网格布局 #stylus

grid-float.styl

// Grid
.row
  margin-bottom: 2%
  &:after
    clear: both
  &:before, &:after
    content: " "
    display: table

[class*=col-]
  display: block
  float: left
  width: 100%
  min-heigth: 1px
  margin-left: 2%
  &:first-child
    margin-left: 0
    
// Function
cal-cols-width(index, total = 12)
  return ((100 - (total / index - 1) * 2) / (total / index))

// Columns
cols-total = 12
for num in (1..cols-total)
  .col-{num}
    width: cal-cols-width(num, cols-total) + '%'

// Offsets
for num in (1..cols-total - 1)
  .offset-{num}
    // 非首项需要加 2% 的间隔
    if num == 1
      margin-left: cal-cols-width(num, cols-total) + '%'
    else
      margin-left: cal-cols-width(num, cols-total) + 2 + '%'