SCSS

_grid.scss

@mixin grid-fractions($divisors, $breakpoint: null) {
  @each $divisor in $divisors {
    @for $dividend from 1 through $divisor - 1 {
      @if $breakpoint {
        &--#{$dividend}\/#{$divisor}\@#{$breakpoint} {
          flex-basis: $dividend / $divisor * 100%;
          max-width: $dividend / $divisor * 100%;
        }
      }

      @else {
        &--#{$dividend}\/#{$divisor} {
          flex-basis: $dividend / $divisor * 100%;
          max-width: $dividend / $divisor * 100%;
        }
      }
    }
  }
}

_keyframes.scss

/// Print all frames
/// @param {string} $animation-name
/// @param {bool}   $relative
@mixin keyframes($animation-name, $relative: true) {

  @content;

  // 'property': list-seperator, comma | space
  $stackable-properties: (
    'transform': space,
  );

  $frame-properties: ();

  @if $relative and not(map-has-key($keyframes, '100%')) {
    @include frame(100%);
  }

  @keyframes #{$animation-name} {
    @while length($keyframes) > 0 {

      $frames: map-keys($keyframes);
      $frame: min($frames...);

      $frame-data: map-get($keyframes, $frame);
      $keyframes: map-remove($keyframes, $frame);

      #{$frame} {

        @if not($relative) {
          $frame-properties: ();
        }

        $length: length($frame-data);

        @for $i from 1 through $length {
          $data: nth(nth($frame-data, $i), 2);
          $properties: map-get($data, 'properties');

          @each $property, $value in $properties {
            @if map-has-key($stackable-properties, $property) and map-has-key($frame-properties, $property) {
              $value: append(map-get($frame-properties, $property), $value, map-get($stackable-properties, $property));
            }

            $frame-properties: map-merge($frame-properties, ($property: $value));
          }
        }

        @each $property, $value in $frame-properties {
          #{$property}: #{$value};
        }
      }
    }
  }

  // reset $keyframes
  $keyframes: () !global;
}


/// Add a frame
/// @param {string} $frame
/// @param {map}    $properties
/// @param {bool}   $stack
@mixin frame($frame, $properties: ()) {

  $data: (
    'properties': $properties,
  );

  $index: 1;

  @if not(global-variable-exists('keyframes')) {
    $keyframes: () !global;
  }

  @if map-has-key($keyframes, $frame) {
    $frame-data: map-get($keyframes, $frame);
    $index: length($frame-data) + 1;
    $frame-data: map-merge($frame-data, ($index: $data));
  }

  @else {
    $frame-data: ($index: $data);
  }

  $keyframes: map-merge($keyframes, ($frame: $frame-data)) !global;
}

_o-grid.scss

$divisors: get('divisors');

.o-grid {
  flex: 1 0 auto;
  max-width: 100%;
  min-width: 0;
  order: 1;

  &--1 {
    flex-basis: 100%;
    max-width: 100%;
  }

  &--grow-0 {
    flex-grow: 0;
  }

  &--shrink-1 {
    flex-grow: 1;
  }

  @include grid-fractions($divisors);

  @each $breakpoint, $value in get('breakpoint') {
    @include breakpoint($value) {
      &--auto\@#{$breakpoint} {
        flex-basis: auto;
      }

      &--grow-1\@#{$breakpoint} {
        flex-grow: 1;
      }

      &--grow-0\@#{$breakpoint} {
        flex-grow: 0;
      }

      &--shrink-1\@#{$breakpoint} {
        flex-grow: 1;
      }

      &--shrink-0\@#{$breakpoint} {
        flex-grow: 0;
      }

      &--1\@#{$breakpoint} {
        flex-basis: 100%;
        max-width: 100%;
      }

      @include grid-fractions($divisors, $breakpoint);
    }
  }

  &__container {
    display: flex;
    flex-flow: row wrap;
  }
}