Sass Responsive mobile first flexbox grid system

gistfile1.txt

// Bootstrap-like Flex Grid System
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$gutter: 16px;

// Mixin for columns
@mixin make-xy($class) {
  @for $i from 1 through 12 {
    .#{$class}-#{$i} {
      flex: 0 0 calc(#{100% / 12 * $i} - #{$gutter});
      max-width: calc(#{100% / 12 * $i} - #{$gutter});
    }
  }
}

@include make-xy("col");

@media (min-width: $breakpoint-sm) {
  @include make-xy("col-sm");
}

@media (min-width: $breakpoint-md) {
  @include make-xy("col-md");
}

@media (min-width: $breakpoint-lg) {
  @include make-xy("col-lg");
}

@media (min-width: $breakpoint-xl) {
  @include make-xy("col-xl");
}

// Row
@mixin make-row() {
  .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -#{$gutter / 2};
    margin-left: -#{$gutter / 2};
  }

  .row > * {
    padding-right: #{$gutter / 2};
    padding-left: #{$gutter / 2};
  }
}

@include make-row();