Recursive Sass Column Generator

columnGenerator.scss

/* The following is an example of flexible recursive column-width generation.
Keep in mind that it does not account for important attributes like padding and margin.
To use, simply set the $totalColumns variable to the number of columns you'd like,
and watch Sass compile the magic.
*/

$totalColumns: 12; // set this to your total number of columns
$i: 1; // start at 1 instead of 0 so that string interpolation on column names is intuitive

@while $i < $totalColumns + 1 {
  .columns-#{$i} {
    width: percentage($i / $totalColumns);
  }   
  $i: $i + 1; 
}

/* Sample Output
.columns-1 {
  width: 8.33333%; }

.columns-2 {
  width: 16.66667%; }

.columns-3 {
  width: 25%; }

.columns-4 {
  width: 33.33333%; }

.columns-5 {
  width: 41.66667%; }

.columns-6 {
  width: 50%; }

.columns-7 {
  width: 58.33333%; }

.columns-8 {
  width: 66.66667%; }

.columns-9 {
  width: 75%; }

.columns-10 {
  width: 83.33333%; }

.columns-11 {
  width: 91.66667%; }

.columns-12 {
  width: 100%; }
*/