Bootstrap grid using SCSS

_grid.scss

// container
.container {
  @extend %padding;
  width: 1170px;
  margin: 0 auto;

  &-fw {
    @extend %padding;
    width: 100%;
  }
}

// row
.row {
  margin-right: -15px;
  margin-left: -15px;

  &::before {
    @extend %row-pseudo;
  }

  &::after {
    @extend %row-pseudo;
    clear: both;
  }
}

%row-pseudo {
  display: table;
  content: " ";
}

// cols
@for $i from 1 through 12 {
  .col-md-#{$i} {
    @extend %cols;
  }
}

%cols {
  @extend %padding;
  position: relative;
  min-height: 1px;
  float: left;
}

$col-items: (
  1: 8.33333333%,
  2: 16.66666667%,
  3: 25%,
  4: 33.33333333%,
  5: 41.66666667%,
  6: 50%,
  7: 58.33333333%,
  8: 66.66666667%,
  9: 75%,
  10: 83.33333333%,
  11: 91.66666667%,
  12: 100%
);

.col {
  &-md {
    @each $number, $percent in $col-items {
      &-#{$number} {
        width: $percent;
      }
    }

    // cols offset
    &-offset {
      @each $number, $percent in $col-items {
        &-#{$number} {
          margin-left: $percent;
        }
      }
    }
  }
}

%padding {
  padding-right: 15px;
  padding-left: 15px;
}