Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

$screen-sm:     30em;
$screen-md:     40em;
$screen-lg:   	50em;
$screen-xl:     50em;

$gutter:        2rem;

$directions: (
    top: flex-start,
    bottom: flex-end,
    center: center
);

$sizes: (
  full:   100%,
  half:   50%,
  third:  33.333333%,
  fourth: 25%,
  sixth:  16.66666667%
);


// http://css-tricks.com/conditional-media-query-mixins/
$MQs: true;

@mixin bp($point) {
    @if ($MQs) {
        $bp-sm: "(min-width: #{$screen-sm})";
        $bp-md: "(min-width: #{$screen-md})";
        $bp-lg: "(min-width: #{$screen-lg})";
        $bp-xl: "(min-width: #{$screen-xl})";

        @if $point == sm {
            @media #{$bp-sm} { @content; }
        }
        @else if $point == md {
            @media #{$bp-md} { @content; }
        }
        @else if $point == lg {
            @media #{$bp-lg} { @content; }
        }
        @else if $point == xl {
            @media #{$bp-xl} { @content; }
        }
    }
}


@mixin cell-base($align, $direction: false) {
  position: relative;
  @if $direction != false {
    align-#{$align}: map-get($directions, $direction);
  }
}

@mixin cell($size: full, $guttered: true, $direction: false) {
    
    position: relative;
  
    @if $size {
      flex: 0 0 map-get($sizes, $size);  
    } @else {
      flex: 1;    
    }
  
    @if $direction != false {
      align-self: map-get($directions, $direction);
    }      
    
    @if $guttered {
      padding-left: -$gutter/2;
      padding-right: -$gutter/2;
    }
}

.cell-sm-full {
  @include cell(half, false, top);
}

@mixin grid($guttered: true, $align: false) {
  
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    position: relative;
        
    @if $align != false {
      align-items: map-get($directions, $align);
    }
        
    @if $guttered {
      margin-left: -$gutter/2;
      margin-right: -$gutter/2;
    }
}

.grid {
  @include grid(false, top);
}

SassMeister-output.css

.cell-sm-full {
  position: relative;
  flex: 0 0 50%;
  align-self: flex-start;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  position: relative;
  align-items: flex-start;
}