Custom flexbox grid with angular material layout API

my-flexbox-grid.scss

@import '../../bower_components/angular-material/angular-material.scss';

$columns: 12;
$gutter: 24px;

.layout-row, .layout-column {
    margin-left: floor(($gutter / -2));
    margin-right: ceil(($gutter / -2));
}

@mixin my-offset-for-name($sizes:null) {
    @if $sizes == null {
        $sizes: '';
    }

    @for $i from 0 through $columns {
        $offsets: '';
        $suffix: '';

        @each $s in $sizes {
            @if $s != '' {
                $suffix: '#{$s}-#{$i}';
            } @else {
                $suffix: '#{$i}';
            }

            $offsets: '.offset-#{$suffix}, .flex-offset-#{$suffix}';
        }

        #{$offsets} {
            margin-left: #{percentage($i/$columns)};
            padding-left: floor(($gutter / 2));
            padding-right: ceil(($gutter / 2));
        }
    }

}

@mixin my-flex-properties-for-name($name: null) {
    $flexName: 'flex';
    @if $name != null {
        $flexName: 'flex-#{$name}';
        $name: '-#{$name}';
    } @else {
        $name: '';
    }

    .#{$flexName} {
        flex: 1;
        box-sizing: border-box;
    }
    // === flex: 1 1 0%;
    .#{$flexName}-grow {
        flex: 1 1 100%;
        box-sizing: border-box;
    }
    .#{$flexName}-initial {
        flex: 0 1 auto;
        box-sizing: border-box;
    }
    .#{$flexName}-auto {
        flex: 1 1 auto;
        box-sizing: border-box;
    }
    .#{$flexName}-none {
        flex: 0 0 auto;
        box-sizing: border-box;
    }

    @for $i from 0 through $columns {
        $value: #{percentage($i/$columns)};

        .#{$flexName}-#{$i} {
            flex: 0 0 #{$value};
            max-width: #{$value};
            max-height: 100%;
            box-sizing: border-box;
            padding-left: floor(($gutter / 2));
            padding-right: ceil(($gutter / 2));
        }

        .layout-row > .#{$flexName}-#{$i},
        .layout#{$name}-row > .#{$flexName}-#{$i} {
            flex: 0 0 #{$value};
            max-width: #{$value};
            max-height: 100%;
            box-sizing: border-box;
        }

        .layout-column > .#{$flexName}-#{$i},
        .layout#{$name}-column > .#{$flexName}-#{$i} {
            flex: 0 0 #{$value};
            max-width: 100%;
            max-height: #{$value};
            box-sizing: border-box;
        }
    }
}

@mixin my_layouts_for_breakpoint($name:null) {
    @include my-offset-for-name($name);
    @include my-flex-properties-for-name($name);
}

@include my_layouts_for_breakpoint();

@media (max-width: $layout-breakpoint-sm - 1) {
    // SMALL SCREEN
    .hide-sm, .hide {
        &:not(.show-sm):not(.show) {
            display: none;
        }
    }
    @include my_layouts_for_breakpoint(sm);
}

@media (min-width: $layout-breakpoint-sm) {
    // BIGGER THAN SMALL SCREEN
    @include my_layouts_for_breakpoint(gt-sm);
}

@media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
    // MEDIUM SCREEN
    .hide, .hide-gt-sm {
        &:not(.show-gt-sm):not(.show-md):not(.show) {
            display: none;
        }
    }
    .hide-md:not(.show-md):not(.show) {
        display: none;
    }
    @include my_layouts_for_breakpoint(md);
}

@media (min-width: $layout-breakpoint-md) {
    // BIGGER THAN MEDIUM SCREEN
    @include my_layouts_for_breakpoint(gt-md);
}

@media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
    // LARGE SCREEN
    .hide, .hide-gt-sm, .hide-gt-md {
        &:not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(.show) {
            display: none;
        }
    }
    .hide-lg:not(.show-lg):not(.show) {
        display: none;
    }

    @include my_layouts_for_breakpoint(lg);
}

@media (min-width: $layout-breakpoint-lg) {
    // BIGGER THAN LARGE SCREEN
    .hide-gt-sm, .hide-gt-md, .hide-gt-lg, .hide {
        &:not(.show-gt-sm):not(.show-gt-md):not(.show-gt-lg):not(.show) {
            display: none;
        }
    }

    @include my_layouts_for_breakpoint(gt-lg);
}