Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

//
// Flexbones Grid System
// 
// Version 1.2
// 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
// Float all direct children of the grid.
// Adds negative padding to each row
// Display flex and flex-wrap are used here to prevent content from 
// floating into above elements
@mixin grid($gutter){
    .grid{
        margin-left: -$gutter;
        @include clearfix();
    }

        // Float children
        .grid > * {
            float: left;
            position: relative;
            padding-left: $gutter;
        }

}


// 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
//
// EXPERIMENTAL (Disabled in current build)
// feels extremely hacky, doesnt scale particularly well
// should it be called per media query?
@mixin grid-equal-height($gutter,$column-name){
    .grid--equal-height{
        display: flex;
        flex-wrap: wrap;
        > * {
            display: flex;
            // ugly ass fix for block level elements 100% children of adisplay: flex container.
            > * {
                width: 100%;
            }
        }
    }
}


// Grid with no gutters
@mixin grid-no-gutter($column-class,$suffix: null){
    .grid--no-gutter#{$suffix}{
        margin-left: 0;

        > * {
            padding-left: 0;
        }
    }
}


// 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){
            $fraction: (abs($i): #{$numerator/abs($i)}-#{$denominator/abs($i)});
            $fractions: map-merge($fractions, $fraction);
        }     
    }
    // 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}{
            margin-left: 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-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_name, $grid_map in $grids{
        $columns:       map-get($grid_map,columns);
        $suffix:        map-get($grid_map,suffix);
        $breakpoint:    map-get($grid_map,breakpoint);
        $gutter:        map-get($grid_map,gutter);

        // Debug info
        $debug-bg:      map-get(map-get($grid_map, debug), background);
        $debug-name:    map-get(map-get($grid_map, debug), name);

        // Include the necessary mixins to generate the grids

        @include at-breakpoint($breakpoint){
            @include grid($gutter);
            @include grid-no-gutter($column-name,$suffix);
            @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.
 */


/**
 * 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:      1200px,
            gutter:          30px,
            debug: (
                background:  #ff645f,
                name:        'Large'
            )
        )
    )
);

@include grid_generate($grid_args);

SassMeister-output.css

Invalid CSS after "": expected selector, was ", .span--value(..."