Base grid

_grid.scss

@mixin base-grid {
    $width: 100% !default;
    $gutter: 1.4% !default;
    $columns: 12 !default; 
    $column_width: $width / $columns;
    $prefix: true !default;
    $push: true !default;
  body {
    min-width: $width;
  } // body

  .grid {
    display: inline;
    float: left;
    margin-left: $gutter / 2;
    margin-right: $gutter / 2;
  } // .grid

  .relative {
    position: relative;
  }
  .clear{
    &::before, &::after {
      content: "";
      display: table;
    } //&::before, &::after
    &:after {
      clear: both;
    } //&::after
  } //.clear
  .col {
    display: block;
    float: left;
    &::first-child {
      margin-left: 0;
    }
  }
} //end mixin

@mixin generate-grid($columns, $width, $gutter) {
    $columns: 8 !default;
    $width: 100% !default;
    $gutter: 1.4% !default;
    $column_width: $width / $columns;
    $prefix: false !default;
    $push: false !default;
    $container-name: ".container-#{$columns}";
  #{$container-name} {
    margin-left: auto;
    margin-right: auto;
    width: $width;
  } // .container
  @for $i from 1 through $columns {
    .span-#{$i}-of-#{$columns} {
      @extend .grid;
      #{$container-name} & {
        width: $i * $column_width - $gutter;
      }
    }
    #{$container-name} {
      @if $prefix == true {
        .prefix-#{$i} {
          padding-left: $i * $column_width;
        }
        .suffix-#{$i} {
          padding-right: $i * $column_width;
        }
      } // @endif
    }
    @if $push == true { 
      .push-#{$i} {
        @extend .relative;
        #{$container-name} & {
          left: $i * $column_width;
        }
      }
      .pull-#{$i} {
        @extend .relative;
        #{$container-name} & {
          left: -$i * $column_width;
        }
      } // @endif
    }
  }
}
@include base-grid();
@include generate-grid (
  $columns: 8,
  $width: 100%,
  $gutter: 1.4%
  );