// SCSS Mixins

@mixin box-sizing($sizing: inherit) {
  -webkit-box-sizing: $sizing;
  -moz-box-sizing: $sizing;
  box-sizing: $sizing;
}

@mixin media-breakpoint-up($name, $breakpoints: $breakpoints) {
  $min: map-get($breakpoints, $name);
  @if $min != 0 {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

@mixin clearfix {
  &::before, &::after {
    display: table;
    content: " ";
  }
  &::after {
    clear: both;
  }
}

// SCSS Mixins

@mixin box-sizing($sizing: inherit) {
  -webkit-box-sizing: $sizing;
  -moz-box-sizing: $sizing;
  box-sizing: $sizing;
}

@mixin media-breakpoint-up($name, $breakpoints: $breakpoints) {
  $min: map-get($breakpoints, $name);
  @if $min != 0 {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

@mixin clearfix {
  &::before, &::after {
    display: table;
    content: " ";
  }
  &::after {
    clear: both;
  }
}

@mixin flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@mixin flex-direction-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

@mixin flex-direction-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

Add SCSS mixins for flexbox
Add SCSS mixins for flexbox
