Experimenting with SASS functions to create a responsive grid system with flexbox

responsive-mixin.scss

@mixin bp($point) {
  
  $bp-babybear: "(max-width: 600px)";
  $bp-papabear: "(max-width: 950px)";

  @if $point == papa-bear {
    @media #{$bp-papabear} { @content; }
  }
  @else if $point == baby-bear {
    @media #{$bp-babybear} { @content; }
  }

}

responsve-grid-flexbox.scss

/*
 * Best place to calculate this in a visual way is: http://gridcalculator.dk/
 *
 * SAMPLE HTML:
 * <section class="g">
 *  <div class="u-4-12">
 *     {content}
 *  </div>
 *  <div class="u-4-12">
 *     {content}
 *  </div>
 *  <div class="u-4-12">
 *    {content}
 *  </div>
 *</section>
 *
*/ 

$max_width: 1140;
$gutter: 40;
$columns: 12;
$outside_margin: 1;

$list: ();

@function page-width() {
    $new_width: $max_width - ($outside_margin * 2);
    $allgutters: $gutter * ($columns - 1);
    $new_width: $new_width - $allgutters;
    $remainder: $new_width % $columns;

    @if ($remainder == 0) {
        @return $max_width - ($outside_margin * 2);
    } @else {
        $page_width: $max_width - $remainder;
        @return $page_width - ($outside_margin * 2);
    }
    
}

@function calc-column($page_width) {
    $full_width: $page_width - ($gutter * ($columns - 1));
    $column_width: $full_width / $columns;
    @return $column_width;
    
}

@function get-column($col_number) {
    $page_width: page-width();
    $col_width: calc-column($page_width);
    $gutter_width: $gutter * ($col_number - 1);
    $col-percent: ($col_width * $col_number) + $gutter_width;
    @return ($col-percent / $page_width) * 100%;
}

@function get-padding() {
    $new_width: $max_width - ($outside_margin * 2);
    $allgutters: $gutter * ($columns - 1);
    $new_width: $new_width - $allgutters;
    $remainder: $new_width % $columns;
    @return ($outside_margin) + ($remainder / 2) + px;
}

.wrapper {
    padding: 0 get-padding();
    max-width: $max-width + px;

    @media all and (max-width: $max_width + px) {
        padding-left: 4%;
        padding-right: 4%;
        margin-left: auto;
        margin-right: auto;
    }
}

.g {
    letter-spacing: -0.31em; 
    *letter-spacing: normal;
    *word-spacing: -0.43em;
    text-rendering: optimizespeed;
    
    display: flex;
    flex-flow: row wrap;
}

.opera-only :-o-prefocus,
.g {
    word-spacing: -0.43em;
}

@for $i from 1 through $columns {
    .u-#{$i}-#{$columns} {
        width: get-column($i);
    }

    @if $i == $columns {
        .u-1 {
            width: get-column($i);
        }
        $list: append($list, unquote('.u-1'), comma);
    }

    @if $i == ($columns / 2) {
        .u-1-2 {
            width: get-column($i);
        }
        $list: append($list, unquote('.u-1-2'), comma);
    }

    @if $i == ($columns / 4) {
        .u-1-4 {
            width: get-column($i);
        }
        $list: append($list, unquote('.u-1-4'), comma);
    }

    @if $i == ($columns / 3) {
        .u-1-3 {
            width: get-column($i);
        }
        $list: append($list, unquote('.u-1-3'), comma);
    }

    $list: append($list, unquote('.u-#{$i}-#{$columns}'), comma);
}

#{$list} {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

.papa-full {
    @include bp(papa-bear) {
        width: 100%;
    }
}

.papa-half {
    @include bp(papa-bear) {
        width: get-column(6);
    }
}

.baby-full {
    @include bp(baby-bear) {
        width: 100%;
    }
}

.mobile-full {
    @include bp(mobile) {
        width: 100%;
    }
}