Generated by SassMeister.com.

SassMeister-input-HTML.jade

section
  .one-half
  .one-half

section
  .two-thirds
  .one-third

section
  .three-quarters
  .one-quarter

SassMeister-input.sass

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

$grid-max-width: 940
$grid-gutter: 20

$gutter: $grid-gutter / $grid-max-width * 100%

=clearfix
  &:before,
  &:after
    content: " "
    display: table
  &:after
    clear: both

.debug
  debug: $gutter *2
  
section
  +clearfix

%grid-1-2, .one-half
  width: (100 - ($gutter * 1)) / 2
  margin-right: $gutter
  float: left
  background: transparentize(#33eeff, 0.4)
  &:last-child
    margin-right: 0
    

%grid-1-3, .one-third
  width: ((100 - ($gutter * 2)) / 3)
  float: left
  margin-right: $gutter
  background: transparentize(#fe3, 0.4)
  &:last-child
    margin-right: 0

%grid-2-3, .two-thirds
  width: (((100 - ($gutter * 2)) / 3) * 2) + $gutter

  float: left
  margin-right: $gutter
  background: transparentize(#e3f, 0.4)
  &:last-child
    margin-right: 0

%grid-1-4, .one-quarter
  width: (((100 - ($gutter * 3)) / 4) * 1)

  float: left
  margin-right: $gutter
  background: transparentize(#3a5, 0.4)
  &:last-child
    margin-right: 0

%grid-3-4, .three-quarters
  width: (((100 - ($gutter * 3)) / 4) * 3) + $gutter * 2

  float: left
  margin-right: $gutter
  background: transparentize(#5a3, 0.4)
  &:last-child
    margin-right: 0

*
  box-sizing: border-box

div
  background: transparentize(#333333, 0.4)
  height: 4.5em
  margin-bottom: 1em

SassMeister-output.css

.debug {
  debug: 4.25532%;
}

section:before, section:after {
  content: " ";
  display: table;
}
section:after {
  clear: both;
}

.one-half {
  width: 48.93617%;
  margin-right: 2.12766%;
  float: left;
  background: rgba(51, 238, 255, 0.6);
}
.one-half:last-child {
  margin-right: 0;
}

.one-third {
  width: 31.91489%;
  float: left;
  margin-right: 2.12766%;
  background: rgba(255, 238, 51, 0.6);
}
.one-third:last-child {
  margin-right: 0;
}

.two-thirds {
  width: 65.95745%;
  float: left;
  margin-right: 2.12766%;
  background: rgba(238, 51, 255, 0.6);
}
.two-thirds:last-child {
  margin-right: 0;
}

.one-quarter {
  width: 23.40426%;
  float: left;
  margin-right: 2.12766%;
  background: rgba(51, 170, 85, 0.6);
}
.one-quarter:last-child {
  margin-right: 0;
}

.three-quarters {
  width: 74.46809%;
  float: left;
  margin-right: 2.12766%;
  background: rgba(85, 170, 51, 0.6);
}
.three-quarters:last-child {
  margin-right: 0;
}

* {
  box-sizing: border-box;
}

div {
  background: rgba(51, 51, 51, 0.6);
  height: 4.5em;
  margin-bottom: 1em;
}

SassMeister-rendered.html

<section>
  <div class="one-half"></div>
  <div class="one-half"></div>
</section>
<section>
  <div class="two-thirds"></div>
  <div class="one-third"></div>
</section>
<section>
  <div class="three-quarters"></div>
  <div class="one-quarter"></div>
</section>