Sass Adaptive Fixed Width Grid

adaptive-fixed-width-grid.scss

//
// Configuration
//

$font-size: 10px;     // Your base font-size in pixels
$column: 48px;  // The column-width of your grid in pixels
$gutter: 24px;  // The gutter-width of your grid in pixels

//
// Column-widths in variables
//

 $cols1: ( 1 * ($column + $gutter) - $gutter);
 $cols2: ( 2 * ($column + $gutter) - $gutter);
 $cols3: ( 3 * ($column + $gutter) - $gutter);
 $cols4: ( 4 * ($column + $gutter) - $gutter);
 $cols5: ( 5 * ($column + $gutter) - $gutter);
 $cols6: ( 6 * ($column + $gutter) - $gutter);
 $cols7: ( 7 * ($column + $gutter) - $gutter);
 $cols8: ( 8 * ($column + $gutter) - $gutter);
 $cols9: ( 9 * ($column + $gutter) - $gutter);
$cols10: (10 * ($column + $gutter) - $gutter);
$cols11: (11 * ($column + $gutter) - $gutter);
$cols12: (12 * ($column + $gutter) - $gutter);
$cols13: (13 * ($column + $gutter) - $gutter);
$cols14: (14 * ($column + $gutter) - $gutter);
$cols15: (15 * ($column + $gutter) - $gutter);
$cols16: (16 * ($column + $gutter) - $gutter);


//
// Column-widths in a function
//

@mixin width ($cols:1) {
  width: ($cols * ($column + $gutter) - $gutter);
}
@mixin full-width ($cols:1){
  width: ($cols * ($column + $gutter));
}
@mixin min-width ($cols:1) {
  width: ($cols * ($column + $gutter) - $gutter);
}