flexi grid thing

flexi.css.scss

// Configurables
$flexiColumns:      24 !default;
$flexiColumnWidth: 30px !default;
$flexiGutterWidth: 18px !default;


// Full width of a row
$flexiRowWidth: ($flexiColumns * $flexiColumnWidth) + ($flexiGutterWidth * ($flexiColumns - 1));
// The width of a column
$flexiGridWidth:  percentage($flexiColumnWidth / $flexiRowWidth);
// The amount of margin between columns
$flexiGridMargin: percentage($flexiGutterWidth / $flexiRowWidth);


@mixin flexi-wrapper {
  @extend .__clearfix;
  margin: 0 auto;
  max-width: $flexiRowWidth;
  width: 100%;
}

@mixin flexi-row {
  padding-left: 20px;
  padding-right: 20px;
}

/*
  Main mixin, set the width of `$columns` columns
  
  Can be changed based on the width of the parent column. I.e., to create a 4Column
  <div> inside a 10Column <div> you would do the following:
  
      @include flexi-column(4, false, 10);
  
*/
@mixin flexi-column($columns, $last: false, $parent: $flexiColumns) {
  width: flexiSpan($columns, $parent);
  @if $last {
    margin-right: 0; }
  @else {
    margin-right: flexiMargin($flexiGridMargin, $parent); }
}

@mixin flexi-push($columns, $parent: $flexiColumns) {
  margin-left: flexiPushMargin($columns, $parent);
}

// Function to calculate width in context
@function flexiSpan($columns, $parent: $flexiColumns) {
  @return ($flexiGridWidth * $columns + $flexiGridMargin * ($columns - 1)) / ($flexiGridWidth * $parent + $flexiGridMargin * ($parent - 1)) * 100%;
}

// Function to calculate margins in context
@function flexiMargin($margin, $parent: $flexiColumns) {
  @return $margin / flexiSpan($parent) * 100%;
}

// Function to calculate push in context
@function flexiPushMargin($columns, $parent: $flexiColumns) {
  @return ($flexiGridWidth * $columns + $flexiGridMargin * $columns) / ($flexiGridWidth * $parent + $flexiGridMargin * ($parent - 1)) * 100%;
}


// Output as classes for use
@mixin output-flexi-classes($gridClass: "grid", $rowClass: "row", $wrapperClass: "wrapper", $lastClass: "last") {
  .#{$gridClass},
  [class^="#{$gridClass}-"],
  [class*=" #{$gridClass}-"] {
    display: inline;
    float: left;
    clear: none;
    .debug & {
      background-color: rgba(#f09, .2);
    }
  }

  // Create two levels of nested grid classes
  @for $i from 1 through $flexiColumns {
    .#{$gridClass}-#{$i} {
      @include flexi-column($i);
      @for $c from 1 through $i - 1 {
        .#{$gridClass}-#{$c} {
          @include flexi-column($c, false, $i);
        }
      }
      .#{$lastClass} {
        margin-right: 0;
      }
    }
  }
  .#{$rowClass} {
    @include flexi-row;
  }
  .#{$wrapperClass} {
    @include flexi-wrapper;
  }
  
  .#{$lastClass} {
    margin-right: 0;
  }
}