Bootstrap 3 Sass Grid

index.scss

$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
  xs: 0,
  sm: 768px,
  md: 992px,
  lg: 1200px,
);

$screen-sm-min: map-get($grid-breakpoints, "sm");
$screen-md-min: map-get($grid-breakpoints, "md");
$screen-lg-min: map-get($grid-breakpoints, "lg");

$container-sm: (720px + $grid-gutter-width);
$container-md: (940px + $grid-gutter-width);
$container-lg: (1140px + $grid-gutter-width);

@mixin media-breakpoint-xs($breakpoint) {
  @if ($breakpoint == "xs") {
    @content;
  } @else {
    @media (min-width: map-get($grid-breakpoints, $breakpoint)) {
      @content;
    }
  }
}

@mixin make-col($size) {
  width: percentage($size / $grid-columns);
}

@mixin make-col-pull($size) {
  right: if($size == 0, auto, percentage(($size / $grid-columns)));
}

@mixin make-col-push($size) {
  left: if($size == 0, auto, percentage(($size / $grid-columns)));
}

@mixin make-col-offset($size) {
  margin-left: if($size == 0, 0, percentage(($size / $grid-columns)));
}

@mixin make-grid-columns {
  %grid-column {
    position: relative;
    min-height: 1px;
    padding-right: ($grid-gutter-width / 2);
    padding-left: ($grid-gutter-width / 2)
  }

  @each $breakpoint in map-keys($grid-breakpoints) {
    @for $i from 1 through $grid-columns {
      .col-#{$breakpoint}-#{$i} {
        @extend %grid-column;
      }
    }

    @include media-breakpoint-xs($breakpoint) {
      %float-#{$breakpoint}-left {
        float: left;
      }

      @for $i from 0 through $grid-columns {
        @if ($i != 0) {
          .col-#{$breakpoint}-#{$i} {
            @include make-col($i);
            @extend %float-#{$breakpoint}-left;
          }
        }

        .col-#{$breakpoint}-pull-#{$i} {
          @include make-col-pull($i);
        }

        .col-#{$breakpoint}-push-#{$i} {
          @include make-col-push($i);
        }

        .col-#{$breakpoint}-offset-#{$i} {
          @include make-col-offset($i);
        }
      }
    }
  }
}

%clearfix {
  &::before,
  &::after {
    display: table;
    content: " "
  }
  &::after {
    clear: both;
  }
}

.container,
.container-fluid {
  padding-right: ceil(($grid-gutter-width / 2));
  padding-left: floor(($grid-gutter-width / 2));
  margin-right: auto;
  margin-left: auto;
  @extend %clearfix;
}

.container {
  @media (min-width: $screen-sm-min) {
    width: $container-sm;
  }

  @media (min-width: $screen-md-min) {
    width: $container-md;
  }

  @media (min-width: $screen-lg-min) {
    width: $container-lg;
  }
}

.row {
  margin-right: floor(($grid-gutter-width / -2));
  margin-left: ceil(($grid-gutter-width / -2));
  @extend %clearfix;
}

.row-no-gutters {
  margin-right: 0;
  margin-left: 0;

  [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

@include make-grid-columns;