Rewrite of sass flexboxgrid

_flexboxgrid.scss

//
// -- Start editing -- //
//
@import "~sass-flex-mixin/flex";

// Set the number of columns you want to use on your layout.
$flexboxgrid-grid-columns: 12 !default;
// Set the gutter between columns.
$flexboxgrid-gutter-width: rem(10px) !default;
// Set a margin for the container sides.
$flexboxgrid-outer-margin: rem(40px) !default;
// Create or remove breakpoints for your project
// Syntax:
// name SIZErem,
$flexboxgrid-breakpoints:
  sm 576px 540px,
  md 768px 720px,
  lg 992px 960px,
  xl 1200px 1140px !default;

$flexboxgrid-max-width: 1200px !default;

//
// -- Stop editing -- //
//

$gutter-compensation: $flexboxgrid-gutter-width / 2 * -1;
$half-gutter-width: $flexboxgrid-gutter-width / 2;

.Container {
  display: block;
  box-sizing: border-box;
  max-width: $flexboxgrid-max-width;
  margin: 0 auto;
  padding-right: $flexboxgrid-outer-margin;
  padding-left: $flexboxgrid-outer-margin;
}

.Container--fluid {
  margin-right: auto;
  margin-left: auto;
  padding-right: $flexboxgrid-outer-margin;
  padding-left: $flexboxgrid-outer-margin;
}

.Row {
  box-sizing: border-box;
  @include flexbox();
  @include flex(0, 1, auto);
  @include flex-direction(row);
  @include flex-wrap(wrap);
  margin-right: $gutter-compensation;
  margin-left: $gutter-compensation;
}

.Row.reverse {
  @include flex-direction(row-reverse);
}

.Col.reverse {
  @include flex-direction(column-reverse);
}

@mixin flexboxgrid-sass-col-common {
  box-sizing: border-box;

  // split @include flex(0, 0, auto) into individual props
  @include flex-grow(0);
  @include flex-shrink(0);

  // we leave @include flex-basis(auto) out of common because
  // in some spots we need it and some we dont
  // more why here: https://github.com/kristoferjoseph/flexboxgrid/issues/126

  padding-right: $half-gutter-width;
  padding-left: $half-gutter-width;
}

.Col {
  @include flexboxgrid-sass-col-common;
  @include flex-basis(auto);
  @include flex-grow(1);
  @include flex-basis(0);
  max-width: 100%;

  &.is-start {
    @include justify-content(flex-start);
    text-align: left;
  }

  &.is-center {
    @include justify-content(center);
    text-align: center;
  }

  &.is-end {
    @include justify-content(flex-end);
    text-align: right;
  }

  &.is-top {
    @include align-items(flex-start);
  }

  &.is-middle {
    @include align-items(center);
  }

  &.is-bottom {
    @include align-items(flex-end);
  }

  &.is-around {
    @include justify-content(space-around);
  }

  &.is-between {
    @include justify-content(space-between);
  }

  &.is-first {
    order: -1;
  }

  &.is-last {
    order: 1;
  }

}

$name: xs;
@for $i from 1 through $flexboxgrid-grid-columns {
  .Col.is-#{$i} {
    @include flex-basis(100% / $flexboxgrid-grid-columns * $i);
    max-width: 100% / $flexboxgrid-grid-columns * $i;
  }
}

@for $i from 0 through $flexboxgrid-grid-columns {
  .Col.offset-is-#{$i} {
    @if $i == 0 {
      margin-left: 0;
    } @else {
      margin-left: 100% / $flexboxgrid-grid-columns * $i;
    }
  }
}

@each $breakpoint in $flexboxgrid-breakpoints {
  $name: nth($breakpoint, 1);
  $size: nth($breakpoint, 2);
  $container: nth($breakpoint, 3);
  @media only screen and (min-width: $size) {
    .Container {
      max-width: $container;
    }

    @for $i from 1 through $flexboxgrid-grid-columns {
      .Col.#{$name}-is-#{$i} {
        @include flex-basis(100% / $flexboxgrid-grid-columns * $i);
        max-width: 100% / $flexboxgrid-grid-columns * $i;
      }
    }
    @for $i from 0 through $flexboxgrid-grid-columns {
      .Col-#{$name}-offset-#{$i} {
        @if $i == 0 {
          margin-left: 0;
        } @else {
          margin-left: 100% / $flexboxgrid-grid-columns * $i;
        }
      }
    }
    &.#{$name}-is-start {
      @include justify-content(flex-start);
      text-align: left;
    }

    &.#{$name}-is-center {
      @include justify-content(center);
      text-align: center;
    }

    &.#{$name}-is-end {
      @include justify-content(flex-end);
      text-align: right;
    }

    &.#{$name}-is-top {
      @include align-items(flex-start);
    }

    &.#{$name}-is-middle {
      @include align-items(center);
    }

    &.#{$name}-is-bottom {
      @include align-items(flex-end);
    }

    &.#{$name}-is-around {
      @include justify-content(space-around);
    }

    &.#{$name}-is-between {
      @include justify-content(space-between);
    }

    &.#{$name}-is-first {
      order: -1;
    }

    &.#{$name}-is-last {
      order: 1;
    }
  }
}