Generated by SassMeister.com.

SassMeister-input-HTML.html

<section>
	<article class="container">
		<div class="col-16"></div>
		<div class="col-15"></div>
		<div class="col-14"></div>
		<div class="col-13"></div>
		<div class="col-12"></div>
		<div class="col-11"></div>
		<div class="col-10"></div>
		<div class="col-9"></div>
		<div class="col-8"></div>
		<div class="col-7"></div>
		<div class="col-6"></div>
		<div class="col-5"></div>
		<div class="col-4"></div>
		<div class="col-3"></div>
		<div class="col-2"></div>
		<div class="col-1"></div>
	</article>
</section>
<section>
	<article class="container">
		<div class="col-third"></div>
		<div class="col-third"></div>
		<div class="col-third"></div>
	</article>
</section>
<section>
	<article class="container">
		<div class="col-fourth"></div>
		<div class="col-fourth"></div>
		<div class="col-fourth"></div>
		<div class="col-fourth"></div>
	</article>
</section>
<section>
	<article class="container">
		<div class="col-fifth"></div>
		<div class="col-fifth"></div>
		<div class="col-fifth"></div>
		<div class="col-fifth"></div>
		<div class="col-fifth"></div>
	</article>
</section>

SassMeister-input.scss

// ----
// Sass (v3.3.6)
// Compass (v1.0.0.alpha.18)
// Flint (v)
// ----

// Grid settings
$flint: (
    // grid configuration
    "config": (
        // define breakpoints
        "desktop": (
            "columns": 16,
            "breakpoint": 1280px,
        ),
        "laptop": (
            "columns": 12,
            "breakpoint": 960px,
        ),
        "tablet": (
            "columns": 8,
            "breakpoint": 640px,
        ),
        "mobile": (
            "columns": 4,
            "breakpoint": 320px,
        ),
        // additional grid settings
        "settings": (
            "default": "desktop", // [any breakpoint's alias : becomes main output]
            "grid": "fluid", // [fluid | fixed]
            "gutter": 10px, // [0-infinity(unit)]
            "float-style": "left", // [left | right]
            "max-width": 1440px, // [true : uses highest breakpoint | false | value(unit)]
            "center-container": true, // [true | false]
            "border-box-sizing": true, // [true | false]
            "debug-mode": false, // [true | false]
        ),
    ),
);

// Import flint
@import "flint";

// Foundation
@include _(foundation);

// Colors
$color: darkslategray;

// Pseudo content
@mixin col-num($i) {
  &:before {
    padding: 0 1em;
    
    @include _(desktop) {
      content: "#{$i} of 16";
    }
    @include _(laptop) {
      @if $i > 12 { $i: 12; }
      content: "#{$i} of 12";
    }
    @include _(tablet) {
      @if $i > 8 { $i: 8; }
      content: "#{$i} of 8";
    }
    @include _(mobile) {
      @if $i > 4 { $i: 4; }
      content: "#{$i} of 4";
    }
  }
}

// Generate cols
@for $i from 1 through 16 {
  .col-#{$i} {

    @if $i == 16 {
      
      @include _($i 12 8 4);
      @include col-num($i);
      
    } @else if $i > 12 {
      
      @include _($i 12 8 4);
      @include col-num($i);
      
    } @else if $i > 8 {
      
      @include _($i $i 8 4);
      @include col-num($i);
      
    } @else if $i > 4 {
      
      @include _($i $i $i 4);
      @include col-num($i);
      
    } @else {
      
      @include _($i);
      @include col-num($i);
      
    }

    background: if($i > 10, darken($color, ($i*0.25)), lighten($color, (16/$i)));
    clear: both;
  }
}

.col-third {
    @include _(16/3 12/3 8/3 4/3);
    background: $color;
    
    &:before { content: "1/3"; padding: 0 1em; }
}

.col-fourth {
    @include _(16/4 12/4 8/4 4/4);
    background: $color;
    
    &:before { content: "1/4"; padding: 0 1em; }
}

.col-fifth {
    @include _(16/5 12/5 8/5 4/5);
    background: $color;
    
    &:before { content: "1/5"; padding: 0 1em; }
}

div[class*="col"] {
    font: 10px Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
    color: lighten($color, 50%);
    height: 120px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 1em 0;
}

section {
  & + & { background: darken(white, 5%); }
  & + & + & { background: darken(white, 10%); }
  & + & + & + & { background: darken(white, 15%); }
}

.container {
    @include _(clear);
    @include _(container);
}

SassMeister-output.css

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.col-1 {
  display: block;
  float: left;
  width: 4.6875%;
  margin-right: 0.78125%;
  margin-left: 0.78125%;
  background: #4d8282;
  clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-1 {
    width: 6.25%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-1 {
    width: 9.375%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-1 {
    width: 18.75%;
    margin-right: 3.125%;
    margin-left: 3.125%;
  }
}
.col-1:before {
  padding: 0 1em;
}
@media only screen and (min-width: 961px) {
  .col-1:before {
    content: "1 of 16";
  }
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-1:before {
    content: "1 of 12";
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-1:before {
    content: "1 of 8";
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-1:before {
    content: "1 of 4";
  }
}

.col-2 {
  display: block;
  float: left;
  width: 10.9375%;
  margin-right: 0.78125%;
  margin-left: 0.78125%;
  background: #3e6969;
  clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-2 {
    width: 14.58333%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-2 {
    width: 21.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-2 {
    width: 43.75%;
    margin-right: 3.125%;
    margin-left: 3.125%;
  }
}
.col-2:before {
  padding: 0 1em;
}
@media only screen and (min-width: 961px) {
  .col-2:before {
    content: "2 of 16";
  }
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-2:before {
    content: "2 of 12";
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-2:before {
    content: "2 of 8";
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-2:before {
    content: "2 of 4";
  }
}

.col-3 {
  display: block;
  float: left;
  width: 17.1875%;
  margin-right: 0.78125%;
  margin-left: 0.78125%;
  background: #396060;
  clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-3 {
    width: 22.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-3 {
    width: 34.375%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-3 {
    width: 68.75%;
    margin-right: 3.125%;
    margin-left: 3.125%;
  }
}
.col-3:before {
  padding: 0 1em;
}
@media only screen and (min-width: 961px) {
  .col-3:before {
    content: "3 of 16";
  }
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-3:before {
    content: "3 of 12";
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-3:before {
    content: "3 of 8";
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-3:before {
    content: "3 of 4";
  }
}

.col-4 {
  display: block;
  float: left;
  width: 23.4375%;
  margin-right: 0.78125%;
  margin-left: 0.78125%;
  background: #375c5c;
  clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-4 {
    width: 31.25%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-4 {
    width: 46.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-4 {
    width: 93.75%;
    margin-right: 3.125%;
    margin-left: 3.125%;
  }
}
.col-4:before {
  padding: 0 1em;
}
@media only screen and (min-width: 961px) {
  .col-4:before {
    content: "4 of 16";
  }
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-4:before {
    content: "4 of 12";
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-4:before {
    content: "4 of 8";
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-4:before {
    content: "4 of 4";
  }
}

.col-5 {
  display: block;
  float: left;
  width: 29.6875%;
  margin-right: 0.78125%;
  margin-left: 0.78125%;
  background: #355959;
  clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-5 {
    width: 39.58333%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-5 {
    width: 59.375%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-5 {
    width: 93.75%;
    margin-right: 3.125%;
    margin-left: 3.125%;
  }
}
.col-5:before {
  padding: 0 1em;
}
@media only screen and (min-width: 961px) {
  .col-5:before {
    content: "5 of 16";
  }
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-5:before {
    content: "5 of 12";
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-5:before {
    content: "5 of 8";
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-5:before {
    content: "4 of 4";
  }
}

.col-6 {
  display: block;
  float: left;
  width: 35.9375%;
  margin-right: 0.78125%;
  margin-left: 0.78125%;
  background: #345858;
  clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-6 {
    width: 47.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-6 {
    width: 71.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-6 {
    width: 93.75%;
    margin-right: 3.125%;
    margin-left: 3.125%;
  }
}
.col-6:before {
  padding: 0 1em;
}
@media only screen and (min-width: 961px) {
  .col-6:before {
    content: "6 of 16";
  }
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-6:before {
    content: "6 of 12";
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-6:before {
    content: "6 of 8";
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-6:before {
    content: "4 of 4";
  }
}

.col-7 {
  display: block;
  float: left;
  width: 42.1875%;
  margin-right: 0.78125%;
  margin-left: 0.78125%;
  background: #335656;
  clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-7 {
    width: 56.25%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-7 {
    width: 84.375%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-7 {
    width: 93.75%;
    margin-right: 3.125%;
    margin-left: 3.125%;
  }
}
.col-7:before {
  padding: 0 1em;
}
@media only screen and (min-width: 961px) {
  .col-7:before {
    content: "7 of 16";
  }
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-7:before {
    content: "7 of 12";
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-7:before {
    content: "7 of 8";
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-7:before {
    content: "4 of 4";
  }
}

.col-8 {
  display: block;
  float: left;
  width: 48.4375%;
  margin-right: 0.78125%;
  margin-left: 0.78125%;
  background: #335555;
  clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-8 {
    width: 64.58333%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-8 {
    width: 96.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-8 {
    width: 93.75%;
    margin-right: 3.125%;
    margin-left: 3.125%;
  }
}
.col-8:before {
  padding: 0 1em;
}
@media only screen and (min-width: 961px) {
  .col-8:before {
    content: "8 of 16";
  }
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-8:before {
    content: "8 of 12";
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-8:before {
    content: "8 of 8";
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-8:before {
    content: "4 of 4";
  }
}

.col-9 {
  display: block;
  float: left;
  width: 54.6875%;
  margin-right: 0.78125%;
  margin-left: 0.78125%;
  background: #325555;
  clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-9 {
    width: 72.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-9 {
    width: 96.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-9 {
    width: 93.75%;
    margin-right: 3.125%;
    margin-left: 3.125%;
  }
}
.col-9:before {
  padding: 0 1em;
}
@media only screen and (min-width: 961px) {
  .col-9:before {
    content: "9 of 16";
  }
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-9:before {
    content: "9 of 12";
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-9:before {
    content: "8 of 8";
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-9:before {
    content: "4 of 4";
  }
}

.col-10 {
  display: block;
  float: left;
  width: 60.9375%;
  margin-right: 0.78125%;
  margin-left: 0.78125%;
  background: #325454;
  clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-10 {
    width: 81.25%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-10 {
    width: 96.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-10 {
    width: 93.75%;
    margin-right: 3.125%;
    margin-left: 3.125%;
  }
}
.col-10:before {
  padding: 0 1em;
}
@media only screen and (min-width: 961px) {
  .col-10:before {
    content: "10 of 16";
  }
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-10:before {
    content: "10 of 12";
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-10:before {
    content: "8 of 8";
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-10:before {
    content: "4 of 4";
  }
}

.col-11 {
  display: block;
  float: left;
  width: 67.1875%;
  margin-right: 0.78125%;
  margin-left: 0.78125%;
  background: #2a4646;
  clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-11 {
    width: 89.58333%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-11 {
    width: 96.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-11 {
    width: 93.75%;
    margin-right: 3.125%;
    margin-left: 3.125%;
  }
}
.col-11:before {
  padding: 0 1em;
}
@media only screen and (min-width: 961px) {
  .col-11:before {
    content: "11 of 16";
  }
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-11:before {
    content: "11 of 12";
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-11:before {
    content: "8 of 8";
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-11:before {
    content: "4 of 4";
  }
}

.col-12 {
  display: block;
  float: left;
  width: 73.4375%;
  margin-right: 0.78125%;
  margin-left: 0.78125%;
  background: #294545;
  clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-12 {
    width: 97.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-12 {
    width: 96.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-12 {
    width: 93.75%;
    margin-right: 3.125%;
    margin-left: 3.125%;
  }
}
.col-12:before {
  padding: 0 1em;
}
@media only screen and (min-width: 961px) {
  .col-12:before {
    content: "12 of 16";
  }
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-12:before {
    content: "12 of 12";
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-12:before {
    content: "8 of 8";
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-12:before {
    content: "4 of 4";
  }
}

.col-13 {
  display: block;
  float: left;
  width: 79.6875%;
  margin-right: 0.78125%;
  margin-left: 0.78125%;
  background: #294545;
  clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-13 {
    width: 97.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-13 {
    width: 96.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-13 {
    width: 93.75%;
    margin-right: 3.125%;
    margin-left: 3.125%;
  }
}
.col-13:before {
  padding: 0 1em;
}
@media only screen and (min-width: 961px) {
  .col-13:before {
    content: "13 of 16";
  }
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-13:before {
    content: "12 of 12";
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-13:before {
    content: "8 of 8";
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-13:before {
    content: "4 of 4";
  }
}

.col-14 {
  display: block;
  float: left;
  width: 85.9375%;
  margin-right: 0.78125%;
  margin-left: 0.78125%;
  background: #284444;
  clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-14 {
    width: 97.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-14 {
    width: 96.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-14 {
    width: 93.75%;
    margin-right: 3.125%;
    margin-left: 3.125%;
  }
}
.col-14:before {
  padding: 0 1em;
}
@media only screen and (min-width: 961px) {
  .col-14:before {
    content: "14 of 16";
  }
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-14:before {
    content: "12 of 12";
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-14:before {
    content: "8 of 8";
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-14:before {
    content: "4 of 4";
  }
}

.col-15 {
  display: block;
  float: left;
  width: 92.1875%;
  margin-right: 0.78125%;
  margin-left: 0.78125%;
  background: #284343;
  clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-15 {
    width: 97.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-15 {
    width: 96.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-15 {
    width: 93.75%;
    margin-right: 3.125%;
    margin-left: 3.125%;
  }
}
.col-15:before {
  padding: 0 1em;
}
@media only screen and (min-width: 961px) {
  .col-15:before {
    content: "15 of 16";
  }
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-15:before {
    content: "12 of 12";
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-15:before {
    content: "8 of 8";
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-15:before {
    content: "4 of 4";
  }
}

.col-16 {
  display: block;
  float: left;
  width: 98.4375%;
  margin-right: 0.78125%;
  margin-left: 0.78125%;
  background: #274242;
  clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-16 {
    width: 97.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-16 {
    width: 96.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-16 {
    width: 93.75%;
    margin-right: 3.125%;
    margin-left: 3.125%;
  }
}
.col-16:before {
  padding: 0 1em;
}
@media only screen and (min-width: 961px) {
  .col-16:before {
    content: "16 of 16";
  }
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-16:before {
    content: "12 of 12";
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-16:before {
    content: "8 of 8";
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-16:before {
    content: "4 of 4";
  }
}

.col-third {
  display: block;
  float: left;
  width: 31.77083%;
  margin-right: 0.78125%;
  margin-left: 0.78125%;
  background: darkslategray;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-third {
    width: 31.25%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-third {
    width: 30.20833%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-third {
    width: 27.08333%;
    margin-right: 3.125%;
    margin-left: 3.125%;
  }
}
.col-third:before {
  content: "1/3";
  padding: 0 1em;
}

.col-fourth {
  display: block;
  float: left;
  width: 23.4375%;
  margin-right: 0.78125%;
  margin-left: 0.78125%;
  background: darkslategray;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-fourth {
    width: 22.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-fourth {
    width: 21.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-fourth {
    width: 18.75%;
    margin-right: 3.125%;
    margin-left: 3.125%;
  }
}
.col-fourth:before {
  content: "1/4";
  padding: 0 1em;
}

.col-fifth {
  display: block;
  float: left;
  width: 18.4375%;
  margin-right: 0.78125%;
  margin-left: 0.78125%;
  background: darkslategray;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
  .col-fifth {
    width: 17.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
  .col-fifth {
    width: 16.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media only screen and (min-width: 0) and (max-width: 320px) {
  .col-fifth {
    width: 13.75%;
    margin-right: 3.125%;
    margin-left: 3.125%;
  }
}
.col-fifth:before {
  content: "1/5";
  padding: 0 1em;
}

div[class*="col"] {
  font: 10px Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
  color: #aecfcf;
  height: 120px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 1em 0;
}

section + section {
  background: #f2f2f2;
}
section + section + section {
  background: #e6e6e6;
}
section + section + section + section {
  background: #d9d9d9;
}

.container {
  zoom: 1;
  display: block;
  float: none;
  max-width: 1440px;
  margin-right: auto;
  margin-left: auto;
}
.container:before, .container:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}
.container:after {
  clear: both;
}

SassMeister-rendered.html

<section>
	<article class="container">
		<div class="col-16"></div>
		<div class="col-15"></div>
		<div class="col-14"></div>
		<div class="col-13"></div>
		<div class="col-12"></div>
		<div class="col-11"></div>
		<div class="col-10"></div>
		<div class="col-9"></div>
		<div class="col-8"></div>
		<div class="col-7"></div>
		<div class="col-6"></div>
		<div class="col-5"></div>
		<div class="col-4"></div>
		<div class="col-3"></div>
		<div class="col-2"></div>
		<div class="col-1"></div>
	</article>
</section>
<section>
	<article class="container">
		<div class="col-third"></div>
		<div class="col-third"></div>
		<div class="col-third"></div>
	</article>
</section>
<section>
	<article class="container">
		<div class="col-fourth"></div>
		<div class="col-fourth"></div>
		<div class="col-fourth"></div>
		<div class="col-fourth"></div>
	</article>
</section>
<section>
	<article class="container">
		<div class="col-fifth"></div>
		<div class="col-fifth"></div>
		<div class="col-fifth"></div>
		<div class="col-fifth"></div>
		<div class="col-fifth"></div>
	</article>
</section>