Generated by SassMeister.com.

SassMeister-input-HTML.html

<h4>Three up</h4>
<div class="three-up-class">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<h4>using mixin</h4>
<div class="three-up-mixin">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<h4>using placeholder</h4>
<div class="three-up-placeholder">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

SassMeister-input.scss

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

@function grid-width($count, $gutter, $width) {
  $grid-width: ($count - 1) * $gutter + ($count * $width);
  @return $grid-width;
}

@function context-width($context, $width, $gutter) {
  $context-width: $context * ($width + $gutter);
  @return $context-width;
}

@mixin the-grid($count, $context: 12, $width: 60, $gutter: 20) {
    $grid-width : grid-width($count, $gutter, $width);
    $context-width : context-width($context, $width, $gutter);
    
    width: percentage($grid-width / $context-width);
}

$wrapperWidth: 600px;

.wrapperClass {
  width: $wrapperWidth;
  clear: both;
  padding: 10px;
}

%wrapper-placeholder {
  width: $wrapperWidth;
  clear: both;
  padding: 10px;
}

@mixin wrapperMixin() {
  width: $wrapperWidth;
  clear: both;
  padding: 10px;
}

@mixin col(){
  display: inline-block;
  float: left;
  background: #999;
  text-align: center;
  
  &+& {
    margin-left: 10px;
  }
}

.col {
  display: inline-block;
  float: left;
  background: #999;
  margin: 10px;
  text-align: center;
  
  &:first-child {
    margin-left: 0;
  }
  
  &:last-child {
    margin-right: 0;
  }
}

%col {
  display: inline-block;
  float: left;
  background: #999;
  
  text-align: center;
}

.three-up-class {
  @extend .wrapperClass;
  >div {
    @extend .col;
    @include the-grid(3);
  }
}

.three-up-mixin {
  @include wrapperMixin();
  >div {
    @include col();
    @include the-grid(3);
  }
}

.three-up-placeholder {
 @extend %wrapper-placeholder;
  >div {
    @extend %col;
    @include the-grid(3);
  }
}

SassMeister-output.css

.wrapperClass, .three-up-class {
  width: 600px;
  clear: both;
  padding: 10px;
}

.three-up-placeholder {
  width: 600px;
  clear: both;
  padding: 10px;
}

.col, .three-up-class > div {
  display: inline-block;
  float: left;
  background: #999;
  margin: 10px;
  text-align: center;
}
.col:first-child, .three-up-class > div:first-child {
  margin-left: 0;
}
.col:last-child, .three-up-class > div:last-child {
  margin-right: 0;
}

.three-up-placeholder > div {
  display: inline-block;
  float: left;
  background: #999;
  text-align: center;
}

.three-up-class > div {
  width: 22.91667%;
}

.three-up-mixin {
  width: 600px;
  clear: both;
  padding: 10px;
}
.three-up-mixin > div {
  display: inline-block;
  float: left;
  background: #999;
  text-align: center;
  width: 22.91667%;
}
.three-up-mixin > div + .three-up-mixin > div {
  margin-left: 10px;
}

.three-up-placeholder > div {
  width: 22.91667%;
}

SassMeister-rendered.html

<h4>Three up</h4>
<div class="three-up-class">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<h4>using mixin</h4>
<div class="three-up-mixin">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<h4>using placeholder</h4>
<div class="three-up-placeholder">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>