/*
* 间距/缝隙/槽: gutter
*/
.gutter {
    margin: $gutter;
}
.gutter-auto{
    display: block;
    margin:auto;
}

@each $direction in top, left, right, bottom {
    .gutter-#{$direction} {
        margin-#{$direction}: $gutter !important;
    }
}


/*
* 间距/缝隙/槽(小): gutter
*/
.gutter-sm {
    margin: $gutter/2 !important;
}

@each $direction in top, left, right, bottom {
    .gutter-#{$direction}-sm {
        margin-#{$direction}: $gutter/2 !important;
    }
}