Variable-izing susy/scss values

susy-vars.scss

// Basic Grid
// (72 x 12) + (25 x 11) + (15 x 2) = 1169

// Define pixels:
$total-width-px: 1169;
$column-width-px: 72;
$gutter-width-px: 25;
$grid-padding-px: 15;
$total-columns: 12;
$base-font: 20;

// Calculate relative sizes:
$base-font-size: $base-font * 1px;
$container-width: ($total-width-px/$base-font)*1em;
$column-width: ($column-width-px/($total-width-px/100))*1%;
$gutter-width: ($gutter-width-px/($total-width-px/100))*1%;
$grid-padding: ($grid-padding-px/($total-width-px/100))*1%;

// Evaluates to:
// $base-font-size: 20px;
// $container-width: 58.45em;    // 1169px
// $column-width: 6.159110351%;    // 72px
// $gutter-width: 2.138579983%;    // 25px
// $grid-padding: 1.28314799%;   // 15px