Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="ctn-container">
  <div class="ctn-grid-24"><span class="box-grid">24</span></div>
  
  <div class="ctn-grid-1"><span class="box-grid">1</span></div>
  <div class="ctn-grid-23"><span class="box-grid">23</span></div>
  
  <div class="ctn-grid-2"><span class="box-grid">2</span></div>
  <div class="ctn-grid-22"><span class="box-grid">22</span></div>
  
  <div class="ctn-grid-3"><span class="box-grid">3</span></div>
  <div class="ctn-grid-21"><span class="box-grid">21</span></div>
  
  <div class="ctn-grid-4"><span class="box-grid">4</span></div>
  <div class="ctn-grid-20"><span class="box-grid">20</span></div>
  
  <div class="ctn-grid-5"><span class="box-grid">5</span></div>
  <div class="ctn-grid-19"><span class="box-grid">19</span></div>
  
  <div class="ctn-grid-6"><span class="box-grid">6</span></div>
  <div class="ctn-grid-18"><span class="box-grid">18</span></div>
  
  <div class="ctn-grid-7"><span class="box-grid">7</span></div>
  <div class="ctn-grid-17"><span class="box-grid">17</span></div>
  
  <div class="ctn-grid-8"><span class="box-grid">8</span></div>
  <div class="ctn-grid-16"><span class="box-grid">16</span></div>
  
  <div class="ctn-grid-9"><span class="box-grid">9</span></div>
  <div class="ctn-grid-15"><span class="box-grid">15</span></div>
  
  <div class="ctn-grid-10"><span class="box-grid">10</span></div>
  <div class="ctn-grid-14"><span class="box-grid">14</span></div>
  
  <div class="ctn-grid-11"><span class="box-grid">11</span></div>
  <div class="ctn-grid-13"><span class="box-grid">13</span></div>
  
  <div class="ctn-grid-12"><span class="box-grid">12</span></div>
  <div class="ctn-grid-12"><span class="box-grid">12</span></div>
</div>

SassMeister-input.scss

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

$lang-front: left;
$d-columns: 24;
$t-columns: 12;
$m-columns: 6;
$gutter: 10;
$width: 1100;
$value: px;

$d-class: ctn-grid;
$t-class: ctn-tablet;
$m-class: ctn-mobile;

%column-base {
  //@include box-sizing(border-box);
  box-sizing: border-box;
  float: $lang-front;
  padding: 0 $gutter / 2 + $value;
  position: relative;
  //@extend %clearfix;
}
%full-width {
  width: 100%;
}

@mixin adjust-grid($columns, $columns-count, $class) {
  @for $i from 1 through $columns-count {
    @if $i < $columns + 1 {
      .#{$class}-#{$i} {
        width: grid-percent($columns, $width, $i);
      }
    }
    @if $i > $columns {
      .#{$class}-#{$i} {
        @at-root (without: media) {
          //@extend %full-width;
        }
      }
    }
  }
}

@function grid-percent($grid-columns, $container-width, $i) {
  $percent: 100 / $grid-columns * $i * 1%;
  @return $percent;
}

@mixin grid-generate($columns, $width, $class, $resp:desktop) {
  @for $i from 1 through $columns {
    .#{$class}-#{$i} {
      @at-root (without: media) {
        @extend %column-base;
      }
      width: grid-percent($columns, $width, $i);
    }
  }
  @if $resp == "desktop" {
    // do nothing, maybe?
  }
  @if $resp == "tablet" {
    /* adjust desktop  */
    @include adjust-grid($columns, $d-columns, $d-class);
  }
  @if $resp == "mobile" {
    @include adjust-grid($columns, $d-columns, $d-class);
    @include adjust-grid($columns, $t-columns, $t-class);
  }
}

/* Desktop
--------------------------------------- */
.ctn-container {
  margin: 0 auto;
  padding: 0;
  width: 1100px;
}
@include grid-generate($d-columns, $width, $d-class);

/* Tablet
--------------------------------------- */
@media screen and (max-width: 961px){
  .ctn-container {
    width: 100%;
  }
  @include grid-generate($t-columns, $width, $t-class, tablet);
}
/* Mobile
--------------------------------------- */
@media screen and (max-width: 481px){
  @include grid-generate($m-columns, $width, $m-class, mobile);
}



span.box-grid {
  background-color: #EDEDED;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  font-size: 12px;
  font-size: 0.8rem;
  font-weight: 100;
  margin-top: 10px;
  margin-top: 0.66667rem;
  padding: 8px 0px;
  padding: 0.53333rem 0rem;
  text-align: center;
  width: 100%;
}

SassMeister-output.css

.ctn-grid-1, .ctn-grid-2, .ctn-grid-3, .ctn-grid-4, .ctn-grid-5, .ctn-grid-6, .ctn-grid-7, .ctn-grid-8, .ctn-grid-9, .ctn-grid-10, .ctn-grid-11, .ctn-grid-12, .ctn-grid-13, .ctn-grid-14, .ctn-grid-15, .ctn-grid-16, .ctn-grid-17, .ctn-grid-18, .ctn-grid-19, .ctn-grid-20, .ctn-grid-21, .ctn-grid-22, .ctn-grid-23, .ctn-grid-24, .ctn-tablet-1, .ctn-tablet-2, .ctn-tablet-3, .ctn-tablet-4, .ctn-tablet-5, .ctn-tablet-6, .ctn-tablet-7, .ctn-tablet-8, .ctn-tablet-9, .ctn-tablet-10, .ctn-tablet-11, .ctn-tablet-12, .ctn-mobile-1, .ctn-mobile-2, .ctn-mobile-3, .ctn-mobile-4, .ctn-mobile-5, .ctn-mobile-6 {
  box-sizing: border-box;
  float: left;
  padding: 0 5px;
  position: relative;
}

/* Desktop
--------------------------------------- */
.ctn-container {
  margin: 0 auto;
  padding: 0;
  width: 1100px;
}

.ctn-grid-1 {
  width: 4.16667%;
}

.ctn-grid-2 {
  width: 8.33333%;
}

.ctn-grid-3 {
  width: 12.5%;
}

.ctn-grid-4 {
  width: 16.66667%;
}

.ctn-grid-5 {
  width: 20.83333%;
}

.ctn-grid-6 {
  width: 25%;
}

.ctn-grid-7 {
  width: 29.16667%;
}

.ctn-grid-8 {
  width: 33.33333%;
}

.ctn-grid-9 {
  width: 37.5%;
}

.ctn-grid-10 {
  width: 41.66667%;
}

.ctn-grid-11 {
  width: 45.83333%;
}

.ctn-grid-12 {
  width: 50%;
}

.ctn-grid-13 {
  width: 54.16667%;
}

.ctn-grid-14 {
  width: 58.33333%;
}

.ctn-grid-15 {
  width: 62.5%;
}

.ctn-grid-16 {
  width: 66.66667%;
}

.ctn-grid-17 {
  width: 70.83333%;
}

.ctn-grid-18 {
  width: 75%;
}

.ctn-grid-19 {
  width: 79.16667%;
}

.ctn-grid-20 {
  width: 83.33333%;
}

.ctn-grid-21 {
  width: 87.5%;
}

.ctn-grid-22 {
  width: 91.66667%;
}

.ctn-grid-23 {
  width: 95.83333%;
}

.ctn-grid-24 {
  width: 100%;
}

/* Tablet
--------------------------------------- */
@media screen and (max-width: 961px) {
  .ctn-container {
    width: 100%;
  }

  .ctn-tablet-1 {
    width: 8.33333%;
  }
  .ctn-tablet-2 {
    width: 16.66667%;
  }
  .ctn-tablet-3 {
    width: 25%;
  }
  .ctn-tablet-4 {
    width: 33.33333%;
  }
  .ctn-tablet-5 {
    width: 41.66667%;
  }
  .ctn-tablet-6 {
    width: 50%;
  }
  .ctn-tablet-7 {
    width: 58.33333%;
  }
  .ctn-tablet-8 {
    width: 66.66667%;
  }
  .ctn-tablet-9 {
    width: 75%;
  }
  .ctn-tablet-10 {
    width: 83.33333%;
  }
  .ctn-tablet-11 {
    width: 91.66667%;
  }
  .ctn-tablet-12 {
    width: 100%;
  }
  /* adjust desktop  */
  .ctn-grid-1 {
    width: 8.33333%;
  }

  .ctn-grid-2 {
    width: 16.66667%;
  }

  .ctn-grid-3 {
    width: 25%;
  }

  .ctn-grid-4 {
    width: 33.33333%;
  }

  .ctn-grid-5 {
    width: 41.66667%;
  }

  .ctn-grid-6 {
    width: 50%;
  }

  .ctn-grid-7 {
    width: 58.33333%;
  }

  .ctn-grid-8 {
    width: 66.66667%;
  }

  .ctn-grid-9 {
    width: 75%;
  }

  .ctn-grid-10 {
    width: 83.33333%;
  }

  .ctn-grid-11 {
    width: 91.66667%;
  }

  .ctn-grid-12 {
    width: 100%;
  }
}
/* Mobile
--------------------------------------- */
@media screen and (max-width: 481px) {
  .ctn-mobile-1 {
    width: 16.66667%;
  }
  .ctn-mobile-2 {
    width: 33.33333%;
  }
  .ctn-mobile-3 {
    width: 50%;
  }
  .ctn-mobile-4 {
    width: 66.66667%;
  }
  .ctn-mobile-5 {
    width: 83.33333%;
  }
  .ctn-mobile-6 {
    width: 100%;
  }
  .ctn-grid-1 {
    width: 16.66667%;
  }

  .ctn-grid-2 {
    width: 33.33333%;
  }

  .ctn-grid-3 {
    width: 50%;
  }

  .ctn-grid-4 {
    width: 66.66667%;
  }

  .ctn-grid-5 {
    width: 83.33333%;
  }

  .ctn-grid-6 {
    width: 100%;
  }

  .ctn-tablet-1 {
    width: 16.66667%;
  }

  .ctn-tablet-2 {
    width: 33.33333%;
  }

  .ctn-tablet-3 {
    width: 50%;
  }

  .ctn-tablet-4 {
    width: 66.66667%;
  }

  .ctn-tablet-5 {
    width: 83.33333%;
  }

  .ctn-tablet-6 {
    width: 100%;
  }
}
span.box-grid {
  background-color: #EDEDED;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  font-size: 12px;
  font-size: 0.8rem;
  font-weight: 100;
  margin-top: 10px;
  margin-top: 0.66667rem;
  padding: 8px 0px;
  padding: 0.53333rem 0rem;
  text-align: center;
  width: 100%;
}

SassMeister-rendered.html

<div class="ctn-container">
  <div class="ctn-grid-24"><span class="box-grid">24</span></div>
  
  <div class="ctn-grid-1"><span class="box-grid">1</span></div>
  <div class="ctn-grid-23"><span class="box-grid">23</span></div>
  
  <div class="ctn-grid-2"><span class="box-grid">2</span></div>
  <div class="ctn-grid-22"><span class="box-grid">22</span></div>
  
  <div class="ctn-grid-3"><span class="box-grid">3</span></div>
  <div class="ctn-grid-21"><span class="box-grid">21</span></div>
  
  <div class="ctn-grid-4"><span class="box-grid">4</span></div>
  <div class="ctn-grid-20"><span class="box-grid">20</span></div>
  
  <div class="ctn-grid-5"><span class="box-grid">5</span></div>
  <div class="ctn-grid-19"><span class="box-grid">19</span></div>
  
  <div class="ctn-grid-6"><span class="box-grid">6</span></div>
  <div class="ctn-grid-18"><span class="box-grid">18</span></div>
  
  <div class="ctn-grid-7"><span class="box-grid">7</span></div>
  <div class="ctn-grid-17"><span class="box-grid">17</span></div>
  
  <div class="ctn-grid-8"><span class="box-grid">8</span></div>
  <div class="ctn-grid-16"><span class="box-grid">16</span></div>
  
  <div class="ctn-grid-9"><span class="box-grid">9</span></div>
  <div class="ctn-grid-15"><span class="box-grid">15</span></div>
  
  <div class="ctn-grid-10"><span class="box-grid">10</span></div>
  <div class="ctn-grid-14"><span class="box-grid">14</span></div>
  
  <div class="ctn-grid-11"><span class="box-grid">11</span></div>
  <div class="ctn-grid-13"><span class="box-grid">13</span></div>
  
  <div class="ctn-grid-12"><span class="box-grid">12</span></div>
  <div class="ctn-grid-12"><span class="box-grid">12</span></div>
</div>