DRY Layouts with Sass

I'm sure we've all experience it. We have a 2-column or 3-column layout that after awhile becomes hacked together with "tricky" math and weird margins. Let's fix that quickly with Sass!

/*  _layout.scss  */
$wrapperWidth: 980px;
$defaultPadding: 20px;
$columnSpacing: 20px;
$column1Width: 720px - ($defaultPadding * 2);
$column2Width: $wrapperWidth - ($column1Width + ($defaultPadding * 2)) - ($defaultPadding * 2) - $columnSpacing;

/*
 * anyfile.scss
 *
 */
@import 'layout'

.wrapper {
  width: $wrapperWidth;

  .col1 {
    float:left;
    padding:$defaultPadding;
    width:$column1Width;
  }

  .col2 {
    float:left;
    margin-left:$columnSpacing;
    padding:$defaultPadding;
    width:$column2Width;
  }
}

Now you can make your layout bigger or smaller (or render easily for mobile devices) without much hassle!