Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v2.0.0)
// ----

@import "sass-list-maps";

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


/**
 * Clearfix mixin
 *
 * Used to clea1r the floats within each grid
 */
@mixin clearfix() {
    *zoom:1;
    &:before, &:after {
        content:"";
        display:table;
    }
    &: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 wrapper
 *
 * This needs revising and combining with .wrapper
 */
@mixin grid_wrapper($gutter){
    .grid{
        @include clearfix();
        margin-left: -$gutter;
    }
}


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

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


/**
 * Grid Margins
 * 
 * Float all items beginning with the grid prefix
 * 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){
    @for $i from 1 through $columns - 1{
        $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);
        }
    }
}


/**
 * 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-z($grid_args, grids);

    $column_name: map-get-z($grid_args, config, columnclass);
    $column_prefix: #{'.' + $column_name};
    $push_prefix: #{'.' + map-get-z($grid_args, config, pushclass)};

    $debug_display: map-get-z($grid_args, config, debug);

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

        // Debug info
        $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_margins($gutter,$column_name);
            @include grid_columns($column_prefix,$suffix,$columns);
            @include grid_push($push_prefix, $suffix, $columns);
            @include grid_omega($column_prefix, $suffix);
            @if( $debug_display = true ){ 
                @include grid_debug($debug_name,$debug_bg) 
            }    
        }    
    }
}




$s:                     0,       800px;
$m:                     800px,   null;
$l:                     1000px,  null;
$xl:                    1400px,  null;



$grid_args:(
    config (
        columnclass         'span--',
        pushclass           'push--',
        debug               true
    ),
    grids (
        default (
            columns         6,
            suffix          null,
            breakpoint      null,
            gutter          15px,
            debug (
                background  #13a2f7,
                name        'Small'
            )
        ),
        medium (
            columns         12,
            suffix          '--m',
            breakpoint      $m,
            gutter          30px,
            debug (
                background  #9ed927,
                name        'Medium'
            )
        ),
        large (
            columns         12,
            suffix          '--l',
            breakpoint      $l,
            gutter          30px,
            debug (
                background  #ff645f,
                name        'Large'
            )
        )
    )
);

@include grid_generate($grid_args);

SassMeister-output.css

/**
 * Flexbones Grid System
 * 
 * Version 1.1
 * Author: Rory Ashford
 */
/**
 * Clearfix mixin
 *
 * Used to clea1r the floats within each grid
 */
/**
 *Column Width
 * 
 * Works out the percent width of columns
 * (gutters can be any unit but columns are always percent bases)
 */
/**
 * 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
 */
/**
 * Span Columns
 * Used to set grids semantically from within 
 * the stylesheet with no additional HTML markup
 */
/**
 * Grid wrapper
 *
 * This needs revising and combining with .wrapper
 */
/**
 * Grid with no gutters
 */
/**
 * Grid Margins
 * 
 * Float all items beginning with the grid prefix
 * e.g. 'span--'
 */
/**
 * 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
 */
/**
 * Grid Columns
 * 
 * Set the grid column widths based on the number of 
 * columns divided by the total number of columns.
 */
/**
 * Push Class
 *
 * Set the push classes that will incrementally indent
 * the column by a maximum number of total-columns -1
 */
/**
* Omega class
*
* An omega declaration that is breakpoint specific
* Basically it floats an element to the right taking
* it out of order potentially.
*/
/**
 * Debug 
 * 
 * Outputs the current breakpoint name to quickly debug 
 * each breakpoint.
 */
/**
 * Grid Generate
 *
 * Pulls the whole thing together ready for output
 * kept seperate from grid_generate as it is DRYer 
 * this way.
 */
/**
    * 6 column grid at Small breakpoint
    */
.grid {
  *zoom: 1;
  margin-left: -15px; }
  .grid:before, .grid:after {
    content: "";
    display: table; }
  .grid:after {
    clear: both; }

[class^="span--"] {
  position: relative;
  float: left;
  padding-left: 15px; }

.span--1-6 {
  width: 16.66667%; }

.span--1-3, .span--2-6 {
  width: 33.33333%; }

.span--1-2, .span--3-6 {
  width: 50%; }

.span--2-3, .span--4-6 {
  width: 66.66667%; }

.span--5-6 {
  width: 83.33333%; }

.push--1-6 {
  width: 16.66667%; }

.push--1-3, .push--2-6 {
  width: 33.33333%; }

.push--1-2, .push--3-6 {
  width: 50%; }

.push--2-3, .push--4-6 {
  width: 66.66667%; }

.push--5-6 {
  width: 83.33333%; }

.span--omega {
  float: right; }

body:after {
  position: fixed;
  display: block;
  bottom: 10px;
  right: 10px;
  padding: 5px 20px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  background: #13a2f7;
  content: "Small"; }

/**
    * 12 column grid at Medium breakpoint
    */
@media (min-width: 800px) {
  .grid {
    *zoom: 1;
    margin-left: -30px; }
    .grid:before, .grid:after {
      content: "";
      display: table; }
    .grid:after {
      clear: both; }
  [class^="span--"] {
    position: relative;
    float: left;
    padding-left: 30px; }
  .span--1-12--m {
    width: 8.33333%; }
  .span--1-6--m, .span--2-12--m {
    width: 16.66667%; }
  .span--1-4--m, .span--3-12--m {
    width: 25%; }
  .span--1-3--m, .span--2-6--m, .span--4-12--m {
    width: 33.33333%; }
  .span--5-12--m {
    width: 41.66667%; }
  .span--1-2--m, .span--2-4--m, .span--3-6--m, .span--6-12--m {
    width: 50%; }
  .span--7-12--m {
    width: 58.33333%; }
  .span--2-3--m, .span--4-6--m, .span--8-12--m {
    width: 66.66667%; }
  .span--3-4--m, .span--9-12--m {
    width: 75%; }
  .span--5-6--m, .span--10-12--m {
    width: 83.33333%; }
  .span--11-12--m {
    width: 91.66667%; }
  .push--1-12--m {
    width: 8.33333%; }
  .push--1-6--m, .push--2-12--m {
    width: 16.66667%; }
  .push--1-4--m, .push--3-12--m {
    width: 25%; }
  .push--1-3--m, .push--2-6--m, .push--4-12--m {
    width: 33.33333%; }
  .push--5-12--m {
    width: 41.66667%; }
  .push--1-2--m, .push--2-4--m, .push--3-6--m, .push--6-12--m {
    width: 50%; }
  .push--7-12--m {
    width: 58.33333%; }
  .push--2-3--m, .push--4-6--m, .push--8-12--m {
    width: 66.66667%; }
  .push--3-4--m, .push--9-12--m {
    width: 75%; }
  .push--5-6--m, .push--10-12--m {
    width: 83.33333%; }
  .push--11-12--m {
    width: 91.66667%; }
  .span--omega--m {
    float: right; }
  body:after {
    position: fixed;
    display: block;
    bottom: 10px;
    right: 10px;
    padding: 5px 20px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    background: #9ed927;
    content: "Medium"; } }

/**
    * 12 column grid at Large breakpoint
    */
@media (min-width: 1000px) {
  .grid {
    *zoom: 1;
    margin-left: -30px; }
    .grid:before, .grid:after {
      content: "";
      display: table; }
    .grid:after {
      clear: both; }
  [class^="span--"] {
    position: relative;
    float: left;
    padding-left: 30px; }
  .span--1-12--l {
    width: 8.33333%; }
  .span--1-6--l, .span--2-12--l {
    width: 16.66667%; }
  .span--1-4--l, .span--3-12--l {
    width: 25%; }
  .span--1-3--l, .span--2-6--l, .span--4-12--l {
    width: 33.33333%; }
  .span--5-12--l {
    width: 41.66667%; }
  .span--1-2--l, .span--2-4--l, .span--3-6--l, .span--6-12--l {
    width: 50%; }
  .span--7-12--l {
    width: 58.33333%; }
  .span--2-3--l, .span--4-6--l, .span--8-12--l {
    width: 66.66667%; }
  .span--3-4--l, .span--9-12--l {
    width: 75%; }
  .span--5-6--l, .span--10-12--l {
    width: 83.33333%; }
  .span--11-12--l {
    width: 91.66667%; }
  .push--1-12--l {
    width: 8.33333%; }
  .push--1-6--l, .push--2-12--l {
    width: 16.66667%; }
  .push--1-4--l, .push--3-12--l {
    width: 25%; }
  .push--1-3--l, .push--2-6--l, .push--4-12--l {
    width: 33.33333%; }
  .push--5-12--l {
    width: 41.66667%; }
  .push--1-2--l, .push--2-4--l, .push--3-6--l, .push--6-12--l {
    width: 50%; }
  .push--7-12--l {
    width: 58.33333%; }
  .push--2-3--l, .push--4-6--l, .push--8-12--l {
    width: 66.66667%; }
  .push--3-4--l, .push--9-12--l {
    width: 75%; }
  .push--5-6--l, .push--10-12--l {
    width: 83.33333%; }
  .push--11-12--l {
    width: 91.66667%; }
  .span--omega--l {
    float: right; }
  body:after {
    position: fixed;
    display: block;
    bottom: 10px;
    right: 10px;
    padding: 5px 20px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    background: #ff645f;
    content: "Large"; } }