better sass grid

grid.scss

@function _grid($columns, $total-columns: 12, $breakpoint: small, $external: true) {
  $gutter-compensation: null;
  $gutter-width: map-get($grid-gutters, $breakpoint);

  @if $external {
    $gutter-compensation: $gutter-width * 0.5;
  } @else {
    $gutter-compensation: $gutter-width * -1;
  }

  @return calc(#{ $columns / $total-columns * 100% } + #{ $gutter-compensation });
}


@mixin _cell-style($columns, $total-columns: 12, $breakpoint: small) {
  @include _cell-base-style {
    @include _cell-width-style($columns, $total-columns, $breakpoint);
    @include _cell-spacing-style($columns, $total-columns, $breakpoint);
  }
}

@mixin _cell-base-style {
  .grid > {
    @content;
  }
}

@mixin _nested-cell-style($nested-columns, $breakpoint: small) {
  @for $columns from 1 through $nested-columns {
    @include _nested-cell-base-style($nested-columns, $breakpoint) {
      @include _cell-width-style($columns, $nested-columns, $breakpoint);
      @include _cell-spacing-style($columns, $nested-columns, $breakpoint);
    }
  }
}

@mixin _nested-cell-base-style($nested-columns, $breakpoint: small) {
  .cell.#{ $breakpoint }-#{ $nested-columns } {
    @content;
  }
}


@mixin cell-width($columns, $total-columns: 12, $breakpoint: small) {
  @include breakpoint($breakpoint) {
    width: _grid($columns, $total-columns, $breakpoint, false);
  }
}

@mixin _cell-width-style($columns, $total-columns: 12, $breakpoint: small) {
  .#{ $breakpoint }-#{ $columns } {
    @include cell-width($columns, $total-columns, $breakpoint);
  }
}


@mixin _cell-spacing($direction, $columns, $total-columns: 12, $breakpoint: small) {
  @include breakpoint($breakpoint) {
    margin-#{ $direction }: _grid($columns, $total-columns, $breakpoint, true);
  }
}

@mixin cell-left-spacing($columns, $total-columns: 12, $breakpoint: small) {
  @include _cell-spacing(left, $columns, $total-columns, $breakpoint);
}

@mixin cell-right-spacing($columns, $total-columns: 12, $breakpoint: small) {
  @include _cell-spacing(right, $columns, $total-columns, $breakpoint);
}

@mixin _cell-spacing-style($columns, $total-columns: 12, $breakpoint: small) {
  .#{ $breakpoint }-offset-#{ $columns } {
    @include cell-left-spacing($columns, $total-columns, $breakpoint);
  }

  .#{ $breakpoint }-offset-right-#{ $columns } {
    @include cell-right-spacing($columns, $total-columns, $breakpoint);
  }
}


@mixin grid-classes {
  .grid {
    display: flex;
    flex-flow: row wrap;
  }

  @each $breakpoint, $total-columns in $grid-columns {
    $half-gutter: map-get($grid-gutters, $breakpoint) / 2;

    .grid {
      @include breakpoint($breakpoint) {
        margin-left: $half-gutter * -1;
        margin-right: $half-gutter * -1;
      }

      > .cell {
        @include breakpoint($breakpoint) {
          margin-left: $half-gutter;
          margin-right: $half-gutter;
        }
      }
    }

    @for $columns from 1 through $total-columns {
      @include _cell-style($columns, $total-columns, $breakpoint);
      @include _nested-cell-style($columns, $breakpoint);
    }
  }
}

@include grid-classes;