Responsive grid using SASS

grid.html

<div class="container">
    <div class="container__row">
        <div class="container__col-sm-12 container__col-md-4 container__col-lg-12">12lg, 4md, 12sm</div>
        <div class="container__col-sm-12 container__col-md-4 container__col-lg-12">12lg, 4md, 12sm</div>
        <div class="container__col-sm-12 container__col-md-4 container__col-lg-12">12lg, 4md, 12sm</div>
    </div>
</div>

<div class="container--fluid">
    <div class="container__row">
        <div class="container__col-sm-12 container__col-md-6 higher">6md, 12sm</div>
        <div class="container__col-sm-12 container__col-md-6 higher">
            <div class="container__row nested">
                <div class="container__col-sm-12 container__col-md-4 container__col-lg-12">12lg, 4md, 12sm</div>
                <div class="container__col-sm-12 container__col-md-4 container__col-lg-12">12lg, 4md, 12sm</div>
                <div class="container__col-sm-12 container__col-md-4 container__col-lg-12">12lg, 4md, 12sm</div>
            </div>
        </div>
    </div>
</div>

grid.scss

$grid__bp-sm: 576;
$grid__bp-md: 768;
$grid__bp-lg: 992;
$grid__bp-xl: 1200;
$grid__cols: 12;

$map-grid-props: (
        '': 0,
        '-sm': $grid__bp-sm,
        '-md': $grid__bp-md,
        '-lg': $grid__bp-lg,
        '-xl': $grid__bp-xl
);

@mixin create-mq($breakpoint, $min-or-max) {
  @if($breakpoint == 0) {
    @content;
  } @else {
    @media screen and (#{$min-or-max}-width: $breakpoint *1px) {
      @content;
    }
  }
}

@mixin create-col-classes($modifier, $grid-cols, $breakpoint) {
  @include create-mq($breakpoint, 'min') {
    &__col#{$modifier}-offset-0 {
      margin-left: 0;
    }
    @for $i from 1 through $grid-cols {
      &__col#{$modifier}-#{$i} {
        flex-basis: (100 / ($grid-cols / $i) ) * 1%;
      }
      &__col#{$modifier}-offset-#{$i} {
        margin-left: (100 / ($grid-cols / $i) ) * 1%;
      }
    }
  }
}

@each $modifier , $breakpoint in $map-grid-props {
  @if($modifier == '') {
    $modifier: '-xs';
  }
  @include create-mq($breakpoint - 1, 'max') {
    .hidden#{$modifier}-down {
      display: none !important;
    }
  }
  @include create-mq($breakpoint, 'min') {
    .hidden#{$modifier}-up {
      display: none !important;
    }
  }
}

.container {
  max-width: $grid__bp-md * 1px;
  margin: 0 auto;
  &--fluid {
    margin: 0;
    max-width: 100%;
  }
  &__row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  @each $modifier , $breakpoint in $map-grid-props {
    @include create-col-classes($modifier, $grid__cols, $breakpoint);
  }
}

grid2.html

<div class="container">
    <div class="container__row">
        <div class="container__col-12 container__col-md-4 container__col-lg-12">12lg, 4md, 12</div>
        <div class="container__col-12 container__col-md-4 container__col-lg-12">12lg, 4md, 12</div>
        <div class="container__col-12 container__col-md-4 container__col-lg-12">12lg, 4md, 12</div>
    </div>
</div>

<div class="container--fluid">
    <div class="container__row">
        <div class="container__col-12 container__col-md-6 higher">6md, 12</div>
        <div class="container__col-12 container__col-md-6 higher">
            <div class="container__row nested">
                <div class="container__col-12 container__col-md-4 container__col-lg-12">12lg, 4md, 12</div>
                <div class="container__col-12 container__col-md-4 container__col-lg-12">12lg, 4md, 12</div>
                <div class="container__col-12 container__col-md-4 container__col-lg-12">12lg, 4md, 12</div>
            </div>
        </div>
    </div>
</div>

grid2.scss

$grid__bp-md: 768;
$grid__bp-lg: 992;
$grid__cols: 12;

$map-grid-props: ('': 0, '-md': $grid__bp-md, '-lg': $grid__bp-lg);

@mixin create-mq($breakpoint) {
  @if($breakpoint == 0) {
    @content;
  } @else {
    @media screen and (min-width: $breakpoint *1px) {
      @content;
    }
  }
}

@mixin create-col-classes($modifier, $grid-cols, $breakpoint) {
  @include create-mq($breakpoint) {
    @for $i from 1 through $grid-cols {
      &__col#{$modifier}-#{$i} {
        flex-basis: (100 / ($grid-cols / $i) ) * 1%;
      }
    }
  }
}

.container {
  max-width: $grid__bp-md * 1px;
  margin: 0 auto;
  &--fluid {
    margin: 0;
    max-width: 100%;
  }
  &__row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  @each $modifier , $breakpoint in $map-grid-props {
    @include create-col-classes($modifier, $grid__cols, $breakpoint);
  }
}

//Styling of grid for demostration purposes
.container {
  background-color: #88d8b0;
  padding: 10px;
  box-sizing: border-box;
  &__row {
    background-color: #ffeead;
    &.nested {
      background-color: #ffcc5c;
    }
  }

  @at-root {
    [class*='container__col-'] {
      &.higher {
        min-height: 60px;
      }
      width: 150px;
      min-height: 30px;
      background-color: #ff6f69;
      outline: 1px solid #ffcc5c;
      margin: 10px 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
}