using a mixing since extend can't be used in media queries

library/scss/partials/_grid.scss

@@ -24,7 +24,14 @@ over your project's layout.
 
 ******************************************************************/
 
+// using a mixin since we can't use placeholder selectors
+@mixin grid-col {
+  float: left;
+  padding-right: 0.75em;
 
+}
+
+// the last column
 .last-col {
   float: right;
   padding-right: 0;
@@ -39,41 +46,33 @@ them however you see fit.
 */
 @media (max-width: 767px) {
 
-  /*
-   *establishing the extend within each breakpoint
-  */
-  %grid-col {
-    float: left;
-    padding-right: 0.75em;
-  }
-
   .m-all {
-    @extend %grid-col;
+    @include grid-col;
     width: 100%;
   }
 
   .m-1of2 {
-    @extend %grid-col;
+    @include grid-col;
     width: 50%;
   }
 
   .m-1of3 {
-    @extend %grid-col;
+    @include grid-col;
     width: 33.33%;
   }
 
   .m-2of3 {
-    @extend %grid-col;
+    @include grid-col;
     width: 66.66%;
   }
 
   .m-1of4 {
-    @extend %grid-col;
+    @include grid-col;
     width: 25%;
   }
 
   .m-3of4 {
-    @extend %grid-col;
+    @include grid-col;
     width: 75%;
   }
 
@@ -83,61 +82,53 @@ them however you see fit.
 /* Portrait tablet to landscape */
 @media (min-width: 768px) and (max-width: 1029px) {
 
-  /*
-   *establishing the extend within each breakpoint
-  */
-  %grid-col {
-    float: left;
-    padding-right: 0.75em;
-  }
-
   .t-all {
-    @extend %grid-col;
+    @include grid-col;
     width: 100%;
   }
 
   .t-1of2 {
-    @extend %grid-col;
+    @include grid-col;
     width: 50%;
   }
 
   .t-1of3 {
-    @extend %grid-col;
+    @include grid-col;
     width: 33.33%;
   }
 
   .t-2of3 {
-    @extend %grid-col;
+    @include grid-col;
     width: 66.66%;
   }
 
   .t-1of4 {
-    @extend %grid-col;
+    @include grid-col;
     width: 25%;
   }
 
   .t-3of4 {
-    @extend %grid-col;
+    @include grid-col;
     width: 75%;
   }
 
   .t-1of5 {
-    @extend %grid-col;
+    @include grid-col;
     width: 20%;
   }
 
   .t-2of5 {
-    @extend %grid-col;
+    @include grid-col;
     width: 40%;
   }
 
   .t-3of5 {
-    @extend %grid-col;
+    @include grid-col;
     width: 60%;
   }
 
   .t-4of5 {
-    @extend %grid-col;
+    @include grid-col;
     width: 80%;
   }
 
@@ -146,121 +137,113 @@ them however you see fit.
 /* Landscape to small desktop */
 @media (min-width: 1030px) {
 
-  /*
-   *establishing the extend within each breakpoint
-  */
-  %grid-col {
-    float: left;
-    padding-right: 0.75em;
-  }
-
   .d-all  {
-    @extend %grid-col;
+    @include grid-col;
     width: 100%;
   }
 
   .d-1of2 {
-    @extend %grid-col;
+    @include grid-col;
     width: 50%;
   }
 
   .d-1of3 {
-    @extend %grid-col;
+    @include grid-col;
     width: 33.33%;
   }
 
   .d-2of3 {
-    @extend %grid-col;
+    @include grid-col;
     width: 66.66%;
   }
 
   .d-1of4 {
-    @extend %grid-col;
+    @include grid-col;
     width: 25%;
   }
 
   .d-3of4 {
-    @extend %grid-col;
+    @include grid-col;
     width: 75%;
   }
 
   .d-1of5 {
-    @extend %grid-col;
+    @include grid-col;
     width: 20%;
   }
 
   .d-2of5 {
-    @extend %grid-col;
+    @include grid-col;
     width: 40%;
   }
 
   .d-3of5 {
-    @extend %grid-col;
+    @include grid-col;
     width: 60%;
   }
 
   .d-4of5 {
-    @extend %grid-col;
+    @include grid-col;
     width: 80%;
   }
 
   .d-1of6 {
-    @extend %grid-col;
+    @include grid-col;
     width: 16.6666666667%;
   }
 
   .d-1of7 {
-    @extend %grid-col;
+    @include grid-col;
     width: 14.2857142857%;
   }
 
   .d-2of7 {
-    @extend %grid-col;
+    @include grid-col;
     width: 28.5714286%;
   }
 
   .d-3of7 {
-    @extend %grid-col;
+    @include grid-col;
     width: 42.8571429%;
   }
 
   .d-4of7 {
-    @extend %grid-col;
+    @include grid-col;
     width: 57.1428572%;
   }
 
   .d-5of7 {
-    @extend %grid-col;
+    @include grid-col;
     width: 71.4285715%;
   }
 
   .d-6of7 {
-    @extend %grid-col;
+    @include grid-col;
     width: 85.7142857%;
   }
 
   .d-1of8 {
-    @extend %grid-col;
+    @include grid-col;
     width: 12.5%;
   }
 
   .d-1of9 {
-    @extend %grid-col;
+    @include grid-col;
     width: 11.1111111111%;
   }
 
   .d-1of10 {
-    @extend %grid-col;
+    @include grid-col;
     width: 10%;
   }
 
   .d-1of11 {
-    @extend %grid-col;
+    @include grid-col;
     width: 9.09090909091%;
   }
 
   .d-1of12 {
-    @extend %grid-col;
+    @include grid-col;
     width: 8.33%;
   }