@mixin recursion example

layout.scss

@import "compass/utilities";

$media-names: desktop tablet handheld-landscape handheld !default;

#container {
    margin: 0 auto;
    @include pie-clearfix;
}

.row-base {
    @include pie-clearfix;
}

.col {
    @include float-left;
    @include pie-clearfix;
    &:last-child { margin-right: 0; }
}

@mixin overcome-recursion-prevention {
}

@mixin media-visible($visible-name) {
    $invisible-classes: ();
    @each $name in $media-names {
        @if $name != $visible-name {
            $invisible-classes: append($invisible-classes, unquote(".#{$name}-visible"), comma);
        }
    }
    @if $visible-name == nth($media-names, 1) {
        #{$invisible-classes} { display: none; }
    }
    @else {
        #{$invisible-classes} { display: none !important; }
        .#{$visible-name}-visible { display: block !important; }
        #{elements-of-type(inline)} {
            &.#{$visible-name}-visible {
                display: inline !important;
            }
        }        
    }
}

@mixin row($width, $gutter, $column-units, $max-level, $current-level) {
    width: $width + px;
    @if $current-level == 1 {
        @extend .row-base;
    }
    
    @include overcome-recursion-prevention;
    
    $total-units: 0;
    @each $column-unit in $column-units {
        $total-units: $total-units + $column-unit;
    }
    $columns: length($column-units);
    $has-two-thirds: $columns == 2 and $total-units == 3;
    $gutters: if($has-two-thirds, 2, $columns - 1);
    $gutters-width: $gutters * $gutter;
    $unit-width: round(($width - $gutters-width) / $total-units);
    @for $i from 1 through $columns {
        $col-width: if($i == $columns, $width - $gutters-width - ($total-units - nth($column-units, $i)) * $unit-width, nth($column-units, $i) * $unit-width)
            + if($has-two-thirds and nth($column-units, $i) == 2, $gutter, 0);
        .col:nth-child(#{$i}) { 
            width: $col-width + px;
            @include rows($col-width, $gutter, $max-level, $current-level);
        }
    }
}

@mixin rows($width, $gutter, $max-level, $current-level: 0) {
    $current-level: $current-level + 1;
    @if $current-level <= $max-level {
        @include overcome-recursion-prevention;
        
        .row { @include row($width, $gutter, 1, $max-level, $current-level); }
        .row-g-1 { @include row($width, $gutter, 1.618 1, $max-level, $current-level); }
        .row-1-g { @include row($width, $gutter, 1 1.618, $max-level, $current-level); }
        .row-1-1 { @include row($width, $gutter, 1 1, $max-level, $current-level); }
        .row-1-2 { @include row($width, $gutter, 1 2, $max-level, $current-level); }
        .row-2-1 { @include row($width, $gutter, 2 1, $max-level, $current-level); }
        .row-1-1-1 { @include row($width, $gutter, 1 1 1, $max-level, $current-level); }
        .row-1-1-1-1 { @include row($width, $gutter, 1 1 1 1, $max-level, $current-level); }
    }
}

@mixin layout($media, $width, $outer-margin, $gutter: 10, $max-level: 2) {
    #container {
        width: $width + px;
        padding: 0 $outer-margin + px;
    }
    .col { 
        margin-right: $gutter + px;
    }
    @include media-visible($media);
    @include rows($width, $gutter, $max-level);
}


/* Default Layout */
@include layout(desktop, 888, 36);

/* Tablet Layout */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    @include layout(tablet, 696, 36);
}

/* Handheld Landscape Layout */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    @include layout(handheld-landscape, 444, 18);
}

/* Handheld Layout */
@media only screen and (max-width: 479px) {
    @include layout(handheld, 284, 18);
}