!columns = 8
!column_width = 100px
!column_margin = 10px
!grid_size = !column_width * !columns + (!column_margin * (!columns - 1))

// Grid container
#grid
  :width = !grid_size

// Columns
.col-1
  :width = !column_width
.col-2
  :width = !column_width * 2 + !column_margin
.col-3
  :width = !column_width * 3 + (!column_margin * 2)
.col-4
  :width = !column_width * 4 + (!column_margin * 3)
.col-5
  :width = !column_width * 5 + (!column_margin * 4)
.col-6
  :width = !column_width * 6 + (!column_margin * 5)
.col-7
  :width = !column_width * 7 + (!column_margin * 6)
.col-8
  :width = !column_width * 8 + (!column_margin * 7)

.last
  :margin
    :right 0

This is a basic form of a CSS grid generated via SASS constants and arithmetic. I have expanded on this and created a SASSed version of the Blueprint grid. You can easily expand this out to as many columns as you like. The Blueprint grid operates on a 24 column grid, and scales back from there.

A huge advantage here is that you can use either px, em or percentage and SASS does all the math for you, making completely fluid grids ridiculously easy to accomplish.

Something of note, you can't mix unit types. If the column_width is a px value, the column_margin must be a px value. If it's width is a percentage, margin must be a percentage.

SASS grid generator

Other