Generated by SassMeister.com.

SassMeister-input.sass

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

$g-selector: unquote(".")
$g-columns: 12

=g-device-type($namespace: '')

  #{$g-selector}g-b--#{$namespace}1of1
    width: 100%

  @for $unit from 1 to $g-columns
    @for $column from 1 to $unit
      #{$g-selector}g-b--#{$namespace}#{$column}of#{$unit}
        width: percentage($column / $unit)

      @for $division from 1 to $unit
        @if $column % $division == 0 and $unit % $division == 0
          #{$g-selector}g-b--#{$namespace}#{$column / $division}of#{$unit / $division}
            @extend #{$g-selector}g-b--#{$namespace}#{$column}of#{$unit}

+g-device-type()

@media(min-width: 1028px)
  +g-device-type('desk--')

SassMeister-output.css

.g-b--1of1 {
  width: 100%;
}

.g-b--1of2 {
  width: 50%;
}

.g-b--1of3 {
  width: 33.3333333333%;
}

.g-b--2of3 {
  width: 66.6666666667%;
}

.g-b--1of4 {
  width: 25%;
}

.g-b--2of4, .g-b--1of2 {
  width: 50%;
}

.g-b--3of4 {
  width: 75%;
}

.g-b--1of5 {
  width: 20%;
}

.g-b--2of5 {
  width: 40%;
}

.g-b--3of5 {
  width: 60%;
}

.g-b--4of5 {
  width: 80%;
}

.g-b--1of6 {
  width: 16.6666666667%;
}

.g-b--2of6, .g-b--1of3 {
  width: 33.3333333333%;
}

.g-b--3of6, .g-b--1of2 {
  width: 50%;
}

.g-b--4of6, .g-b--2of3 {
  width: 66.6666666667%;
}

.g-b--5of6 {
  width: 83.3333333333%;
}

.g-b--1of7 {
  width: 14.2857142857%;
}

.g-b--2of7 {
  width: 28.5714285714%;
}

.g-b--3of7 {
  width: 42.8571428571%;
}

.g-b--4of7 {
  width: 57.1428571429%;
}

.g-b--5of7 {
  width: 71.4285714286%;
}

.g-b--6of7 {
  width: 85.7142857143%;
}

.g-b--1of8 {
  width: 12.5%;
}

.g-b--2of8, .g-b--1of4 {
  width: 25%;
}

.g-b--3of8 {
  width: 37.5%;
}

.g-b--4of8, .g-b--2of4, .g-b--1of2 {
  width: 50%;
}

.g-b--5of8 {
  width: 62.5%;
}

.g-b--6of8, .g-b--3of4 {
  width: 75%;
}

.g-b--7of8 {
  width: 87.5%;
}

.g-b--1of9 {
  width: 11.1111111111%;
}

.g-b--2of9 {
  width: 22.2222222222%;
}

.g-b--3of9, .g-b--1of3 {
  width: 33.3333333333%;
}

.g-b--4of9 {
  width: 44.4444444444%;
}

.g-b--5of9 {
  width: 55.5555555556%;
}

.g-b--6of9, .g-b--2of3 {
  width: 66.6666666667%;
}

.g-b--7of9 {
  width: 77.7777777778%;
}

.g-b--8of9 {
  width: 88.8888888889%;
}

.g-b--1of10 {
  width: 10%;
}

.g-b--2of10, .g-b--1of5 {
  width: 20%;
}

.g-b--3of10 {
  width: 30%;
}

.g-b--4of10, .g-b--2of5 {
  width: 40%;
}

.g-b--5of10, .g-b--1of2 {
  width: 50%;
}

.g-b--6of10, .g-b--3of5 {
  width: 60%;
}

.g-b--7of10 {
  width: 70%;
}

.g-b--8of10, .g-b--4of5 {
  width: 80%;
}

.g-b--9of10 {
  width: 90%;
}

.g-b--1of11 {
  width: 9.0909090909%;
}

.g-b--2of11 {
  width: 18.1818181818%;
}

.g-b--3of11 {
  width: 27.2727272727%;
}

.g-b--4of11 {
  width: 36.3636363636%;
}

.g-b--5of11 {
  width: 45.4545454545%;
}

.g-b--6of11 {
  width: 54.5454545455%;
}

.g-b--7of11 {
  width: 63.6363636364%;
}

.g-b--8of11 {
  width: 72.7272727273%;
}

.g-b--9of11 {
  width: 81.8181818182%;
}

.g-b--10of11 {
  width: 90.9090909091%;
}

@media(min-width: 1028px) {
  .g-b--desk--1of1 {
    width: 100%;
  }

  .g-b--desk--1of2 {
    width: 50%;
  }

  .g-b--desk--1of3 {
    width: 33.3333333333%;
  }

  .g-b--desk--2of3 {
    width: 66.6666666667%;
  }

  .g-b--desk--1of4 {
    width: 25%;
  }

  .g-b--desk--2of4, .g-b--desk--1of2 {
    width: 50%;
  }

  .g-b--desk--3of4 {
    width: 75%;
  }

  .g-b--desk--1of5 {
    width: 20%;
  }

  .g-b--desk--2of5 {
    width: 40%;
  }

  .g-b--desk--3of5 {
    width: 60%;
  }

  .g-b--desk--4of5 {
    width: 80%;
  }

  .g-b--desk--1of6 {
    width: 16.6666666667%;
  }

  .g-b--desk--2of6, .g-b--desk--1of3 {
    width: 33.3333333333%;
  }

  .g-b--desk--3of6, .g-b--desk--1of2 {
    width: 50%;
  }

  .g-b--desk--4of6, .g-b--desk--2of3 {
    width: 66.6666666667%;
  }

  .g-b--desk--5of6 {
    width: 83.3333333333%;
  }

  .g-b--desk--1of7 {
    width: 14.2857142857%;
  }

  .g-b--desk--2of7 {
    width: 28.5714285714%;
  }

  .g-b--desk--3of7 {
    width: 42.8571428571%;
  }

  .g-b--desk--4of7 {
    width: 57.1428571429%;
  }

  .g-b--desk--5of7 {
    width: 71.4285714286%;
  }

  .g-b--desk--6of7 {
    width: 85.7142857143%;
  }

  .g-b--desk--1of8 {
    width: 12.5%;
  }

  .g-b--desk--2of8, .g-b--desk--1of4 {
    width: 25%;
  }

  .g-b--desk--3of8 {
    width: 37.5%;
  }

  .g-b--desk--4of8, .g-b--desk--2of4, .g-b--desk--1of2 {
    width: 50%;
  }

  .g-b--desk--5of8 {
    width: 62.5%;
  }

  .g-b--desk--6of8, .g-b--desk--3of4 {
    width: 75%;
  }

  .g-b--desk--7of8 {
    width: 87.5%;
  }

  .g-b--desk--1of9 {
    width: 11.1111111111%;
  }

  .g-b--desk--2of9 {
    width: 22.2222222222%;
  }

  .g-b--desk--3of9, .g-b--desk--1of3 {
    width: 33.3333333333%;
  }

  .g-b--desk--4of9 {
    width: 44.4444444444%;
  }

  .g-b--desk--5of9 {
    width: 55.5555555556%;
  }

  .g-b--desk--6of9, .g-b--desk--2of3 {
    width: 66.6666666667%;
  }

  .g-b--desk--7of9 {
    width: 77.7777777778%;
  }

  .g-b--desk--8of9 {
    width: 88.8888888889%;
  }

  .g-b--desk--1of10 {
    width: 10%;
  }

  .g-b--desk--2of10, .g-b--desk--1of5 {
    width: 20%;
  }

  .g-b--desk--3of10 {
    width: 30%;
  }

  .g-b--desk--4of10, .g-b--desk--2of5 {
    width: 40%;
  }

  .g-b--desk--5of10, .g-b--desk--1of2 {
    width: 50%;
  }

  .g-b--desk--6of10, .g-b--desk--3of5 {
    width: 60%;
  }

  .g-b--desk--7of10 {
    width: 70%;
  }

  .g-b--desk--8of10, .g-b--desk--4of5 {
    width: 80%;
  }

  .g-b--desk--9of10 {
    width: 90%;
  }

  .g-b--desk--1of11 {
    width: 9.0909090909%;
  }

  .g-b--desk--2of11 {
    width: 18.1818181818%;
  }

  .g-b--desk--3of11 {
    width: 27.2727272727%;
  }

  .g-b--desk--4of11 {
    width: 36.3636363636%;
  }

  .g-b--desk--5of11 {
    width: 45.4545454545%;
  }

  .g-b--desk--6of11 {
    width: 54.5454545455%;
  }

  .g-b--desk--7of11 {
    width: 63.6363636364%;
  }

  .g-b--desk--8of11 {
    width: 72.7272727273%;
  }

  .g-b--desk--9of11 {
    width: 81.8181818182%;
  }

  .g-b--desk--10of11 {
    width: 90.9090909091%;
  }
}