960.gs 그리드 시스템 생성기(Grid System Generater) Using Sass

grid.scss

@mixin generate-960gs (
    $grid_count: 12
) {
    @if($grid_count != 12 or $grid_count != 16 or $grid_count != 24) {
        @warn "960 그리드 시스템에 해당하는 숫자 값이 아닙니다.";
        @debug "입력하신 전달인자 $grid_count 값은 #{$grid_count}(#{type-of($grid_count)}) 입니다.";
    }
    // =======================================
    // Grid Options
    // =======================================
    $page_width: 960px;
    // $grid_count: 12; // 12, 16, 24
    // $gutter: 20px; // 12(20), 16(20), 24(10)
    $gutter: if($grid_count == 24, 10px, 20px);
    $grid-width: ( $page_width - ($gutter/2 * 2) - ($gutter * ($grid_count -  1) ) ) / $grid_count;
    // $i:1;

    // =======================================
    // Grid System
    // =======================================
    body {
        min-width: $page_width;
    }

    .container_#{$grid_count} {
        margin: 0 auto;
        width: $page_width;

        &::before,
        &::after {
            @extend .clearfix;
        }
    }

    %grid-base {
        display: inline;
        float: left;
        margin-left: $gutter/2;
        margin-right: $gutter/2;
    }

    // @while $i <= $grid_count {
    @for $i from 1 through $grid_count {

        .grid-#{$i} {
            @extend %grid-base;
            .container_#{$grid_count} & {
                width: $grid-width * $i + $gutter * ($i - 1);
            }
        }

        .push-#{$i},
        .pull-#{$i} {
            @extend %pos-r;
        }

        .push-#{$i} {
            .container_#{$grid_count} & {
                left: ($grid-width + $gutter) * $i;
            }
        }

        .pull-#{$i} {
            .container_#{$grid_count} & {
                left: -($grid-width + $gutter) * $i;
            }
        }

        .prefix-#{$i} {
            .container_#{$grid_count} & {
                padding-left: ($grid-width + $gutter) * $i;
            }
        }

        .suffix-#{$i} {
            .container_#{$grid_count} & {
                padding-right: ($grid-width + $gutter) * $i;
            }
        }

        // $i: $i + 1;
    }

    // =======================================
    // Push, Pull
    // =======================================
    %pos-r {
        position: relative;
    }

    // =======================================
    // Alpha, Omega
    // =======================================
    .alpha {
      margin-left: 0;
    }

    .omega {
      margin-right: 0;
    }

    // =======================================
    // Clear
    // =======================================
    .clearfix::after {
        content: '';
        display: block;
        clear: both;
    }
    .lt-ie8 .clearfix {
        zoom: 1;
    }

}