Column span mixin

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

$total-columns: 12;
$column-width: 60px;
$gutter-width: 20px;

@mixin column-span($columns) {
  // Output width property and take padding into account.
  width: $columns * ($column-width + $gutter-width);
  padding: 0 ($gutter-width / 2);
}

.wrap {
  width: $total-columns * ($column-width + $gutter-width);
}

article {
  @include column-span(8);
}

aside {
  @include column-span(4);
}

SassMeister-output.css

.wrap {
  width: 960px;
}

article {
  width: 640px;
  padding: 0 10px;
}

aside {
  width: 320px;
  padding: 0 10px;
}

SassMeister-rendered.html