css - 双循环断点 + 容器宽度，如 Bootstrap

Question

我正在开发自己的 CSS 库，并希望将 Bootstrap 的双循环（断点和容器宽度）添加到此网格：http ://hugeinc.github.io/flexboxgrid-sass/

我有这个断点的 sass 地图：

$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px) !default;

这是网格的当前映射，我想删除断点第三个值。

我还为您提供了网格混合和循环，以便您理解代码：

$container-sizes: 
sm auto 576px,
md auto 768px,
lg 960px 992px,
xl 1140px 1200px,
xxl 1320px 1400px !default;

@mixin sass-col-common {
    padding-right: $half-gutter-width;
    padding-left: $half-gutter-width;

@mixin grid-systeme($name, $size) {
    .grid-wrapper {
        max-width: $size;
        padding-right: $outer-margin;
        padding-left: $outer-margin;
        margin: 0 auto;
    }

    .col-#{$name} {
        @include sass-col-common;
        flex-basis: auto;
    }

    @for $i from 1 through $grid-columns {
        .col-#{$name}-#{$i} {
            max-width: 100% / $grid-columns * $i;

            @include sass-col-common;
            flex-basis: 100% / $grid-columns * $i;
        }
    }

    @for $i from 0 through $grid-columns {
        .offset-#{$name}-#{$i} {
            @include sass-col-common;

            @if $i==0 {
                margin-left: 0;
            }

            @else {
                margin-left: 100% / $grid-columns * $i;
            }
        }
    }

    .col-#{$name} {
        max-width: 100%;

        flex-grow: 1;
        flex-basis: 0;
    }
    }
    @include grid-systeme(xs, auto);
    
    @each $name,
    $size,
    $container-size in $container-sizes {
        @media only screen and (min-width: $container-size) {
            @include grid-systeme($name, $size);
        }
    }

关于 mixins，我从 Bootstrap 复制了这个：

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
    $min: breakpoint-min($name, $breakpoints);

    @if $min {
        @media (min-width: $min) {
            @content;
        }
    }
    @else {
        @content;
    }
}

功能相同，我从 Bootstrap 中获取了这些功能：

// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
    $min: map-get($grid-breakpoints, $name);
    @return if($min !=0, $min, null);
}

// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
// Useful for making responsive utilities.
//
//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    ""  (Returns a blank string)
//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    "-sm"
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
    @return if(breakpoint-min($name, $breakpoints)==null, "", "-#{$name}");
}

例如，我有这个循环，它可以进行响应式定位：

$positions:
0 0%,
25 25%,
50 50%,
75 75%,
100 100%;

@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
        @each $value, $position in $positions {
            .top#{$infix}-#{$value}{
                top: $position !important;
            }
            .left#{$infix}-#{$value}{
                left: $position !important;
            }
            .bottom#{$infix}-#{$value}{
                bottom: $position !important;
            }
            .right#{$infix}-#{$value}{
                right: $position !important;
            }
        }
    }
}

我希望能够为网格构建相同类型的循环，使用两个 Sass 映射，一个用于断点，一个用于容器宽度，如下所示：

这样，我只能在 $grid-breakpoints 上循环实用程序（位置、边距...）以及在 $grid-breakpoints 和 $container-widths 上循环。它比我现在拥有的更干净。

$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px) !default;

$container-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
) !default;

现在我不明白 Bootstrap 是如何处理它的。谢谢您的帮助。

标签： cssbootstrap-4sasscss-gridmixins