Compass: fluid/fixed grid generator

flexgrid.scss

// ======================
// FlexGrid 
// ======================

// Usage :
// nb of column, column width, column gutter, min-width, max-width, responsive, fluid/fixed
// @include flexGrid(12, 60, 20, 640px, 1024px, true)

@mixin flexGrid($grid-columns: 12, $grid-column-with:60, $grid-column-margin: 20,
            $min-width: 320px, $max-width: 1600px, $responsive: true, $type: 'fluid'){

    // Le Context
    $context: ($grid-columns*$grid-column-with) + ($grid-column-margin*($grid-columns - 1));

    @if $type == 'fluid' {        
        .wrapper{ 
            padding:0 5%;
            margin:0 auto;
        }

        .row{
            min-width: $min-width; 
            max-width: $max-width;
            margin:auto;
            @extend .clearfix;
        }
        .row .row{width:auto;min-width:0;max-width:none;}
        @include buildPercentCells($grid-column-with, $grid-column-margin, $grid-columns, $context);
    }
    @else {
        .row{
            width: $context#{"px"};
            margin:0 auto;
            @extend .clearfix;
        } 
        .row .row{width:auto;}
        @include buildFixedCells($grid-column-with, $grid-column-margin, $grid-columns, $context);
    }


    // Responsive media queries - WORK IN PROGRESS
    // Interpolating SASS variables into media queries doesn't work before next SASS Update
    // https://twitter.com/#!/nex3/status/147092584869797888
    @if $responsive == true {

        // Tablet
        @media screen and (max-width: 768px) {}

        // Mobile
        @media screen and (max-width: 479px),(max-device-width:320px) {
            .row{min-width:0;width:auto;}
            .cell{
                width:auto!important;
                float:none;
                margin:0;
            }
        }
    }

    // Other styles
    .cell-last{margin-right:0;}

     // Fix percent bug Webkit
    @if $type == 'fluid' {
        @media screen and (-webkit-min-device-pixel-ratio:0) {
            .cell-last { display: table-cell;
                float: none;
            }
            .cell-last:after {
                content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
                visibility: hidden;
                clear: both;
                height: 0 !important;
                display: block;
                line-height: 0; 
            }
        }
        // Fix percent bug in IE7
        *+html .cell-last {
            position: relative;
            left: -3px;
            margin-right: -3px;
        }
    }
}

// Build mixins
@mixin buildPercentCells($grid-column-with, $grid-column-margin, $grid-columns, $context) {
    .cell{
        float:left;
        position:relative;
        margin:0 pxToPercent($grid-column-margin, $context) 0 0;
    }

    @for $i from 1 through $grid-columns {
        $pxSize: ($grid-column-with * $i) + ($grid-column-margin * ($i - 1));
        .cell-#{$i} {
            @if $i == 12 { margin-right:0; }
            width: pxToPercent($pxSize, $context);
            @extend .cell;
        }
        .prepend-#{$i} { margin-left:pxToPercent($pxSize + $grid-column-margin, $context); }
        .append-#{$i} { margin-right: pxToPercent($pxSize + $grid-column-margin*2, $context); }
    }
}

@mixin buildFixedCells($grid-column-with, $grid-column-margin, $grid-columns, $context) {
    .cell{
        float:left;
        position:relative;
        margin:0 $grid-column-margin#{"px"} 0 0;
    }

    @for $i from 1 through $grid-columns {
        $pxSize: ($grid-column-with * $i) + ($grid-column-margin * ($i - 1));
        .cell-#{$i} {
            @if $i == 12 { margin-right:0; }
            width: $pxSize#{"px"};
            @extend .cell;
        }
        .prepend-#{$i} { margin-left:$pxSize + $grid-column-margin#{"px"}; }
        .append-#{$i} { margin-right: $pxSize + $grid-column-margin*2#{"px"}; }
    }

}

mixins.scss

// Formula : Target / context = result
@function em($target, $context: $base-font-size) {
   // Usage: font-size: em(21px);
   @return $target / $context + 0em;
}

@function pxToPercent($target, $context) {
    @return percentage($target / $context);
}

usage.html

<div class="wrapper">
	<div class="row">
	    <div class="cell-3"><p class="highlight">3</p></div>
	    <div class="cell-9 cell-last"><p class="highlight">9</p></div>
	</div>

	<div class="row">
	    <div class="cell-4"><p class="highlight">4</p></div>
	    <div class="cell-6"><p class="highlight">6</p></div>
	    <div class="cell-2 cell-last"><p class="highlight">2</p></div>
	</div>

	<div class="row">
	    <div class="cell-1"><p class="highlight">1</p></div>
	    <div class="cell-3 append-2"><p class="highlight">3 app-2</p></div>
	    <div class="cell-1"><p class="highlight">1</p></div>
	    <div class="cell-1"><p class="highlight">1</p></div>
	    <div class="cell-1"><p class="highlight">1</p></div>
	    <div class="cell-1"><p class="highlight">1</p></div>
	    <div class="cell-1"><p class="highlight">1</p></div>
	    <div class="cell-1 cell-last"><p class="highlight">1</p></div>
	</div>
</div>