Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

@mixin make-grid($name, $totalWidth, $gutter, $modules){
  $moduleWidth: ($totalWidth - ( $modules - 1 )*$gutter ) / $modules;

  @for $i from 1 through $modules {
    $finalWidth: $moduleWidth * $i + $gutter*($i - 1);
    .#{$name}__#{$i}of#{$modules} {
      width: round($finalWidth);
    }
    .#{$name}__#{$i}of#{$modules}--16r9 {
      height: round($finalWidth / 1.76);
    }
    .#{$name}__#{$i}of#{$modules}--4r3 {
      height: round($finalWidth / 1.33);
    }
    .#{$name}__#{$i}of#{$modules}--1r1 {
      height: round($finalWidth);
    }
  }
}

@include make-grid('grid-bg', 1200px, 24px, 5);
@include make-grid('grid-bg', 1200px, 24px, 3);
@include make-grid('grid-md', 955px, 24px, 4);
@include make-grid('grid-md', 955px, 24px, 3);
@include make-grid('grid-sm', 710px, 24px, 3);
@include make-grid('grid-sm', 710px, 24px, 2);

SassMeister-output.css

.grid-bg__1of5 {
  width: 221px;
}

.grid-bg__1of5--16r9 {
  height: 125px;
}

.grid-bg__1of5--4r3 {
  height: 166px;
}

.grid-bg__1of5--1r1 {
  height: 221px;
}

.grid-bg__2of5 {
  width: 466px;
}

.grid-bg__2of5--16r9 {
  height: 265px;
}

.grid-bg__2of5--4r3 {
  height: 350px;
}

.grid-bg__2of5--1r1 {
  height: 466px;
}

.grid-bg__3of5 {
  width: 710px;
}

.grid-bg__3of5--16r9 {
  height: 404px;
}

.grid-bg__3of5--4r3 {
  height: 534px;
}

.grid-bg__3of5--1r1 {
  height: 710px;
}

.grid-bg__4of5 {
  width: 955px;
}

.grid-bg__4of5--16r9 {
  height: 543px;
}

.grid-bg__4of5--4r3 {
  height: 718px;
}

.grid-bg__4of5--1r1 {
  height: 955px;
}

.grid-bg__5of5 {
  width: 1200px;
}

.grid-bg__5of5--16r9 {
  height: 682px;
}

.grid-bg__5of5--4r3 {
  height: 902px;
}

.grid-bg__5of5--1r1 {
  height: 1200px;
}

.grid-bg__1of3 {
  width: 384px;
}

.grid-bg__1of3--16r9 {
  height: 218px;
}

.grid-bg__1of3--4r3 {
  height: 289px;
}

.grid-bg__1of3--1r1 {
  height: 384px;
}

.grid-bg__2of3 {
  width: 792px;
}

.grid-bg__2of3--16r9 {
  height: 450px;
}

.grid-bg__2of3--4r3 {
  height: 595px;
}

.grid-bg__2of3--1r1 {
  height: 792px;
}

.grid-bg__3of3 {
  width: 1200px;
}

.grid-bg__3of3--16r9 {
  height: 682px;
}

.grid-bg__3of3--4r3 {
  height: 902px;
}

.grid-bg__3of3--1r1 {
  height: 1200px;
}

.grid-md__1of4 {
  width: 221px;
}

.grid-md__1of4--16r9 {
  height: 125px;
}

.grid-md__1of4--4r3 {
  height: 166px;
}

.grid-md__1of4--1r1 {
  height: 221px;
}

.grid-md__2of4 {
  width: 466px;
}

.grid-md__2of4--16r9 {
  height: 264px;
}

.grid-md__2of4--4r3 {
  height: 350px;
}

.grid-md__2of4--1r1 {
  height: 466px;
}

.grid-md__3of4 {
  width: 710px;
}

.grid-md__3of4--16r9 {
  height: 404px;
}

.grid-md__3of4--4r3 {
  height: 534px;
}

.grid-md__3of4--1r1 {
  height: 710px;
}

.grid-md__4of4 {
  width: 955px;
}

.grid-md__4of4--16r9 {
  height: 543px;
}

.grid-md__4of4--4r3 {
  height: 718px;
}

.grid-md__4of4--1r1 {
  height: 955px;
}

.grid-md__1of3 {
  width: 302px;
}

.grid-md__1of3--16r9 {
  height: 172px;
}

.grid-md__1of3--4r3 {
  height: 227px;
}

.grid-md__1of3--1r1 {
  height: 302px;
}

.grid-md__2of3 {
  width: 629px;
}

.grid-md__2of3--16r9 {
  height: 357px;
}

.grid-md__2of3--4r3 {
  height: 473px;
}

.grid-md__2of3--1r1 {
  height: 629px;
}

.grid-md__3of3 {
  width: 955px;
}

.grid-md__3of3--16r9 {
  height: 543px;
}

.grid-md__3of3--4r3 {
  height: 718px;
}

.grid-md__3of3--1r1 {
  height: 955px;
}

.grid-sm__1of3 {
  width: 221px;
}

.grid-sm__1of3--16r9 {
  height: 125px;
}

.grid-sm__1of3--4r3 {
  height: 166px;
}

.grid-sm__1of3--1r1 {
  height: 221px;
}

.grid-sm__2of3 {
  width: 465px;
}

.grid-sm__2of3--16r9 {
  height: 264px;
}

.grid-sm__2of3--4r3 {
  height: 350px;
}

.grid-sm__2of3--1r1 {
  height: 465px;
}

.grid-sm__3of3 {
  width: 710px;
}

.grid-sm__3of3--16r9 {
  height: 403px;
}

.grid-sm__3of3--4r3 {
  height: 534px;
}

.grid-sm__3of3--1r1 {
  height: 710px;
}

.grid-sm__1of2 {
  width: 343px;
}

.grid-sm__1of2--16r9 {
  height: 195px;
}

.grid-sm__1of2--4r3 {
  height: 258px;
}

.grid-sm__1of2--1r1 {
  height: 343px;
}

.grid-sm__2of2 {
  width: 710px;
}

.grid-sm__2of2--16r9 {
  height: 403px;
}

.grid-sm__2of2--4r3 {
  height: 534px;
}

.grid-sm__2of2--1r1 {
  height: 710px;
}