A mixin for creating percentage based grid columns on the fly.

drupal-cols-flexible-width.scss

$columns: 12;
$gridWidth: 100%;
@mixin drupalCols($rows: 4, $padding: 0 10px) {
  width: ($gridWidth / $columns) * $rows;
  float: left;
  padding: $padding;
  @include box-sizing(border-box);
}

.my-div {
  @include drupalCols(4);
}

// This becomes:
/*
.my-div {
  width: 33.333%;
  float: left;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*/