使用Scss生成Bootstrap栅格系统

$screen-map: (xs:768px, sm: 768px, md: 992px);
$gutter-width: 20px;
$container-map: (sm: 720px - $gutter-width, md: 960px - $gutter-width);
$grid-columns: 24;
$colclass-map: (pull: right, push: left, offset: margin-left);

@mixin grid-padding($gutter) {
    padding-left: $gutter/2;
    padding-right: $gutter/2;
}

@mixin margin-auto($horizone:null) {
    @if $horizone {
        margin: $horizone/2 auto;
    }
    @else {
        margin-left: auto;
        margin-right: auto;
    }
}

@mixin make-container() {
    @include grid-padding($gutter-width);
    @include margin-auto();

    @each $screen, $width in $container-map {
        $min-width: map-get($screen-map, $screen);
        @media (min-width: $min-width) {
            max-width: $width;
        }
    }
}

.container{
    @include make-container();
    width: 100%;
}

.container-fluid{
    @include grid-padding($gutter-width);
    @include margin-auto();
}
.row {
    margin-left: -10px;
    margin-right: -10px;
    overflow: hidden; //避免父元素高度为0
}

@mixin make-grid() {
    $list: null;
    @for $i from 1 through $grid-columns {
        @each $screen, $width in $screen-map {
            $item: '.col-#{$screen}-#{$i}';
            @if $list {
                $list: #{$list}, #{$item};
            } @else {
                $list: $item;
            }
        }
    }
    #{$list} {
        @include grid-padding($gutter-width);
        position: left;
        min-height: 1px;
        box-sizing: border-box; //避免栅格padding导致宽度溢出
    }
}

@mixin make-column($screen) {
    $list: null;
    @for $i from 1 through $grid-columns {
        $item: '.col-#{$screen}-#{$i}';
        @if $list {
            $list: #{$list}, #{$item};
        } @else {
            $list: $item;
        }

        #{$item} {
            width: percentage(($i)/$grid-columns);
        }
        @each $class, $suffix in $colclass-map {
            .col-#{$screen}-#{$class}-#{$i} {
                #{$suffix}: percentage(($i)/$grid-columns);
            }
        }
    }

    #{$list} {
        float: left;
    }
}

@include make-grid();
@each $screen, $width in $screen-map {
    @if $screen == xs {
        @include make-column($screen);
    } @else {
        @media (min-width: $width) {
            @include make-column($screen);
        }
    }
}

参考文章：https://www.cnblogs.com/sohuhome/p/11242053.html