A mixin for creating grid columns on the fly (pixel based: non-responsive)

drupal-cols-fixed-width.scss

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

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

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

// You can also add more or less padding like this:

.my-div {
  @include drupalCols(4, 10px 20px 30px);
}

/*
.my-div {
  width: 240px;
  float: left;
  padding: 10px 20px 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*/