CSS栅格系统实现

可以模仿bootstrap框架的做法，改变盒模型为border-box,设置外层容器container的宽度，确定好列数，就可以用sass来的栅格系统的创建了。

例如，设置$container为1180px,分为12列，那么每一列也就是1180/12的宽度，即98.333px,使用百分制来标识单个列的宽度，那么计算方式应该为percentage(($container/$grid-columns)/$container)。每一列的宽度得到的了，那每个盒子设置好内间距，那么一个栅格系统就实现了。实现效果如下：

$max-container-width: 1180px;
$grid-gutter-width: 15px;
$grid-gutter-width-percent: percentage($grid-gutter-width/$max-container-width);
$grid-columns: 12;
$grid-single-width: percentage(($max-container-width/$grid-columns)/$max-container-width);

%pd {
    padding: 0 $grid-gutter-width;
}
.container {
    width: $max-container-width;
    margin-left: auto;
    margin-right:auto;
    padding-left: $grid-gutter-width;
    padding-right: $grid-gutter-width;
    &:after {
        content: '';
        display: block;
        clear: both;
    }
}
.row {
    margin-left: -#{$grid-gutter-width};
    margin-right: -#{$grid-gutter-width};
    &:after {
        content: '';
        display: block;
        clear: both;
    }
}

@for $i from 1 through $grid-columns {
    .col-md-#{$i} {
        @extend .left;
        @extend %pd;
        width: $grid-single-width * $i;
    }
}
@for $i from 1 to $grid-columns {
    .col-md-offset-#{$i} {
        margin-left: $grid-single-width * $i;
    }
}