Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.0)
// ----

/**
 * Flexbones Grid System
 * 
 * Version 1.1
 * Author: Rory Ashford
 */


/**
 * Clearfix mixin
 *
 * Used to clear the floats within each grid
 */
@mixin clearfix() {
    *zoom:1;
    &:before, &:after {
        content:"";
        display:table;
        flex-basis: 0; // flexbox clear fix 
        order: 1; // flexbox clear fix
    }
    &:after { clear:both; }
}


/**
 * Column Width
 * 
 * Works out the percent width of columns (gutters can be 
 * any unit but columns are always percent bases)
 */
@function column-width($number-of-columns,$total-columns) {
    $single-col-width: 100 / $total-columns * 1%;
    @return $single-col-width * $number-of-columns;
}


/**
 * At Breakpoint
 * 
 * a mixin for outputting inline media queries
 * Just supply a Sass list as an argument with a min/max
 * If there are no min and max values supplied then it 
 * doesnt ouput a media query
 */
@mixin at-breakpoint($min,$max:null){
    @if($max == null and $min != null){
        @media (min-width: $min){
            @content;
        }
    } @elseif($min == null and $max == null) {
        @content;
    } @else{
         @media (min-width: $min) and (max-width: $max){
            @content;
        }
    }
}


/**
 * Span Columns
 * Used to set grids semantically from within 
 * the stylesheet with no additional HTML markup
 */
@mixin span-columns($columns, $total-columns){
    width: column-width($columns,$total-columns);
    padding-left: $gutter-width; 
}


/**
 * Grid
 *
 * Called once per breakpoint as the gutters may be different
 */
@mixin grid-wrapper($gutter){
    .grid{
        margin-left: -$gutter;
        display: flex;
        flex-wrap: wrap;
        @include clearfix();
    }
}

/**
 * Equal height Grid items
 * Uses flexbox so no IE support but there is a polyfill:
 * http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback
 */

@mixin grid-wrapper-equal-height($gutter,$column-name){
    .grid--equal-height{
        display: flex;
        flex-wrap: wrap;

        /**
         * Proposal to fix block level elements 
         * within flexbox container losing 100% width
         * Commented out as its pretty ugly right now.
         */

        /*& > [class^="#{$column-name}"]{
            display: flex;
            & > div, 
            & > section,
            & > article,
            & > aside,
            & > figure{
                width: 100%;
            }
        }*/
    }
}


/**
 * Grid with no gutters
 */
@mixin grid-wrapper-full($column-class){
    .grid--full{
        margin-left: 0;

        > [class^="#{$column-class}"]{
            padding-left: 0;
        }
    }
}


/**
 * Grid Margins
 * 
 * Float all items beginning with the grid prefix
 * Adds  negative padding to each row
 * e.g. 'span--'
 */
@mixin grid-margins($gutter,$prefix){
    [class^="#{$prefix}"]{
        position: relative;
        float: left;
        padding-left: $gutter;
    }   
}


/**
 * Equivalent Fractions
 *
 * This function will add additional classes
 * to make the grid system more expressive.
 * Instead of writing 3/12 you can also write 1/4
 * with this function
 */
@function equivalent-fractions($numerator,$denominator){
    $fractions: ();
    @for $i from -$numerator through -1{
        @if($numerator % abs($i) == 0 and $denominator % abs($i) == 0){
            $fractions: map-merge($fractions, abs($i) #{$numerator/abs($i)}-#{$denominator/abs($i)});
        }     
    }
    // return map of all fractions
    @return $fractions;
}


/**
 * Grid Columns
 * 
 * Set the grid column widths based on the number of 
 * columns divided by the total number of columns.
 */
@mixin grid-columns($prefix: null, $suffix: null, $columns: null, $fifths: false, $sevenths: false){
    @for $i from 1 through $columns{
        $css-classes: equivalent-fractions($i,$columns);
        $column-class: null;
        
        @each $css-class in $css-classes{
            $column-class: $column-class, 
            #{ $prefix }#{ value( $css-class ) }#{ $suffix };
        }
        
        #{$column-class}{
            width: column-width($i,$columns);
        }
    }

    // Add fifths where total columns
    // doesnt divide into fifths.
    @if($fifths == true){
        @for $i from 1 through 5{
            $fifth_class: #{$prefix}#{$i}+'-5'+ #{$suffix};

            #{$fifth_class}{
                width: column-width($i,5);
            }
        }
    }

    // Add sevenths where total columns
    // doesnt divide into fifths.
    @if($sevenths == true){
        @for $i from 1 through 7{
            $seventh_class: #{$prefix}#{$i}+'-7'+ #{$suffix};

            #{$seventh_class}{
                width: column-width($i,7);
            }
        }
    }
}


/**
 * Push Class
 *
 * Set the push classes that will incrementally indent
 * the column by a maximum number of total-columns -1
 */

@mixin grid-push($prefix: null, $suffix: null, $columns: null){
    @for $i from 1 through $columns - 1{
        $css-classes: equivalent-fractions($i,$columns);
        $push-class: null;
        
        @each $css-class in $css-classes{
            $push-class: $push-class, 
            #{ $prefix }#{ value($css-class) }#{ $suffix };
        }
        
        #{$push-class}{
            width: column-width($i,$columns);
        }
    }
}


/**
* Omega class
*
* An omega declaration that is breakpoint specific
* Basically it floats an element to the right taking
* it out of order potentially.
*/
@mixin grid-omega($prefix: null, $suffix: null){
    #{$prefix}omega#{$suffix} {
        float: right;
    }
}

   
/**
 * Debug 
 * 
 * Outputs the current breakpoint name to quickly debug 
 * each breakpoint.
 */
@mixin grid-debug($breakpoint-name,$debug-bg: #000){
    body:after{
        position: fixed;
        display: block;
        bottom: 10px;
        right: 10px;
        padding: 5px 20px;
        font-size: 14px;
        font-weight: bold;
        color: white;
        background: $debug-bg;
        content: "#{$breakpoint-name}";
    }
}


/**
 * Grid Generate
 *
 * Pulls the whole thing together ready for output
 * kept seperate from grid-generate as it is DRYer 
 * this way.
 */
@mixin grid-generate($grid-args){

    // This solution will ONLY work with libsass and 
    // sass-list-maps polyfill, will add code for 
    // sass3.3+ support later

    $grids: map-get($grid-args, grids);
    $column-name: map-get(map-get($grid-args, config), columnclass);
    //$column-name: map-get-z($grid-args, config, columnclass);
    $column-prefix: #{'.' + $column-name};
    $push-prefix: #{'.' + map-get(map-get($grid-args, config), pushclass)};
    $debug-display: map-get(map-get($grid-args, config), debug);

    @each $grid in $grids{
        $columns:       map-get($grid,columns);
        $suffix:        map-get($grid,suffix);
        $breakpoint:    map-get($grid,breakpoint);
        $gutter:        map-get($grid,gutter);

        // Debug info
        // $debug-bg:      map-get(map-get(map-get($grid-args, $grid), debug), background);
        
        $debug-bg:      map-get(map-get($grid, debug), background);
        
        //$debug-bg:      map-get-z(value($grid),debug,background);
        $debug-name:    map-get-z(value($grid),debug,name);

        // Include the necessary mixins to generate the grids
        
        /**
         * #{$columns} column grid at #{$debug-name} breakpoint
         */

        @include at-breakpoint($breakpoint){
            @include grid-wrapper($gutter);
            @include grid-wrapper-full($column-name);
            @include grid-wrapper-equal-height($gutter,$column-name);
            @include grid-margins($gutter,$column-name);
            @include grid-columns($column-prefix,$suffix,$columns,true, true);
            @include grid-push($push-prefix, $suffix, $columns);
            @include grid-omega($column-prefix, $suffix);
            @if( $debug-display == true ){ 
                @include grid-debug($debug-name,$debug-bg) 
            }    
        }    
    }
}











/**
 * _grid.scss
 * Responsive grids setup
 */

/**
 * Wrapper
 *
 * Project specific rather than grid
 * specific so not suitable to add
 * to the grid system.
 */
.wrapper {
    margin: 0 auto;
    width: 90%;
    @include at-breakpoint(1000px){ 
        width: 90%;
        max-width: 1200px; 
    }
}


/**
 * Grid setup
 * 
 * Provide maps to setup grid system
 * add infinite breakpoints, breakpoint
 * independant number of columns and 
 * gutters, debug breakpoints.
 */
$grid_args:(
    config: (
        columnclass:      'span--',
        pushclass:        'push--',
        debug:            true
    ),
    grids: (
        default: (
            columns:      12,
            suffix:       null,
            breakpoint:   null,
            gutter:       10px,
            debug: (
                background:  #13a2f7,
                name:        'Small'
            )
        ),
        medium: (
            columns:         12,
            suffix:          '--m',
            breakpoint:      800px,
            gutter:           20px,
            debug: (
                background:  #9ed927,
                name:        'Medium'
            )
        ),
        large: (
            columns:         12,
            suffix:          '--l',
            breakpoint:      1000px,
            gutter:          30px,
            debug: (
                background:  #ff645f,
                name:        'Large'
            )
        )
    )
);

@include grid_generate($grid_args);

SassMeister-output.css

stdin:303: argument `$map` of `map-get($map, $key)` must be a map
Backtrace:
	stdin:303, in function `map-get`
	stdin:303, in mixin `grid-generate`
	stdin:409