Positioning.scss

//VARIABLES
$xs: xs;
$sm: sm;
$md: md;
$lg: lg;
$xl: xl;
$breakpoints: $sm, $md, $lg, $xl;
$breakpoint-xs: 575px;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breaks: $breakpoint-sm, $breakpoint-md, $breakpoint-lg, $breakpoint-xl;
$display-flex: justify-content, align-content;
$flex-name: start, end, around, between, center;
$flex-options: flex-start, flex-end, space-around, space-between, center;
$align-flex: align-items, align-self;
$align-names: start, end, center, stretch, baseline;
$align-options: flex-start, flex-end, center, stretch, baseline;

//DISPLAY-FLEX OPTIONS
@each $display in $display-flex {
  $i: 1;
  @each $option in $flex-options {
    .#{$display}-#{nth($flex-name, $i)} {
      #{$display}: #{$option} !important;
    }
  $i: $i + 1;
  }
}

$j: 1;
@each $break in $breaks {
  @media screen and (min-width: $break) {
    @each $display in $display-flex {
      $i: 1;
      @each $option in $flex-options {
        .#{$display}-#{nth($breakpoints,$j)}-#{nth($flex-name, $i)} {
          #{$display}: #{$option} !important;
      }
      $i: $i + 1;
      }
    }
  }
  $j: $j + 1
}

//ALIGN-FLEX OPTIONS
@each $align in $align-flex {
  $i: 1;
  @each $option in $align-options {
    .#{$align}-#{nth($align-names, $i)} {
      #{$align}: #{$option} !important;
    }
    $i: $i + 1;
  }
}

$j: 1;
@each $break in $breaks {
  @media screen and (min-width: $break) {
    @each $align in $align-flex {
      $i: 1;
      @each $option in $align-options {
        .#{$align}-#{nth($breakpoints,$j)}-#{nth($align-names, $i)} {
          #{$align}: #{$option} !important;
        }
        $i: $i + 1;
      }
    }
  }
  $j: $j + 1
}

@each $direction in $flex-direction {
  .flex-#{$direction} {
    flex-direction: #{$direction} !important;
  }
}

@each $break in $breaks {
  @media screen and (min-width: $break) {
    @each $direction in $flex-direction {
      $j: 1;
      .flex-#{$direction}-#{nth($breakpoints,$j)} {
        flex-direction: #{$direction} !important;
      }
    }
  }
  $j: $j + 1
}