Responsive Grid generated with Sass

SassMeister-input.scss

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

$grid-max-width   : 1240px !default;
$col-width        : 75px !default;
$col-count        : 12 !default;
$col-gutter       : 30px !default;
$grid-padding     : $col-gutter / 2 !default;

// check if the grid will be responsive or not
// true => the column's width will be in percentage
// flase => the column's width will be in pixels

$responsive: true !default;

// function to calculate the relative grid width to user variables

@function grid-width($col-width, $col-count, $col-gutter) {
  $grid-width: ($col-width * $col-count) + ( $col-gutter * ($col-count - 1));
  @return $grid-width;
}

// set the grid container

.container {
  
  //set the container width if the grid is responsive
  
  @if $responsive == true {
    max-width: grid-width($col-width, $col-count, $col-gutter);
  } 
  @else {
    width: grid-width($col-width, $col-count, $col-gutter);  
  }
  margin: 0 auto;
  padding: 0 $grid-padding;
}

//Set the grid columns width



@for $i from 1 through $col-count {
    
    //calculate the grid width
    $grid-width: grid-width($col-width, $col-count, $col-gutter);
    
    //calculate the target
    $target: grid-width($col-width, $i, $col-gutter);
    
    //set the columns width in percentage if the grid is responsive
    @if $responsive == true {
      .grid__col--#{$i} {
        width: percentage($target / $grid-width);
      }
    }
    @else {
      .grid__col--#{$i} {
        width: $target;
      }
    }
}

[class^='grid__col'] {
  float: left;
  padding: 0 $grid-padding;
  margin-left: 2%;
}

[class^='grid__col']:last-of-type {
  float: right;
}

SassMeister-output.css

.container {
  max-width: 1230px;
  margin: 0 auto;
  padding: 0 15px;
}

.grid__col--1 {
  width: 6.0975609756%;
}

.grid__col--2 {
  width: 14.6341463415%;
}

.grid__col--3 {
  width: 23.1707317073%;
}

.grid__col--4 {
  width: 31.7073170732%;
}

.grid__col--5 {
  width: 40.243902439%;
}

.grid__col--6 {
  width: 48.7804878049%;
}

.grid__col--7 {
  width: 57.3170731707%;
}

.grid__col--8 {
  width: 65.8536585366%;
}

.grid__col--9 {
  width: 74.3902439024%;
}

.grid__col--10 {
  width: 82.9268292683%;
}

.grid__col--11 {
  width: 91.4634146341%;
}

.grid__col--12 {
  width: 100%;
}

[class^='grid__col'] {
  float: left;
  padding: 0 15px;
  margin-left: 2%;
}

[class^='grid__col']:last-of-type {
  float: right;
}