这种混合的 flexbox/grid 布局 SCSS mixin 是如何工作的？

Question

我找到了一个用于 flexbox/grid 布局的 SCSS mixin HERE。

这是完整的混合：

@mixin grid-col(
        $col: null,
        $grid-columns: 12,
        $col-offset: null,
        $gutter: null,
        $condensed: false,
        $align-self: null,
        $flex-grow: 0,
        $flex-shrink:1,
        $flex-basis: auto,
        $order: null,
        $grid-type: skeleton,
        $last-child: false
    ){

    @if type-of($col) == number and unitless($col) == true {
        $flex-grow: 0;
        $flex-shrink: 0;
        $flex-basis: percentage($col / $grid-columns);

        @if $grid-type == skeleton {
            @if $gutter and unit($gutter) == '%' {
                $flex-basis: $flex-basis - $gutter;
            } @else if $gutter and unitless($gutter) == false {
                $flex-basis: calc(#{$flex-basis} - #{$gutter});
            }
        } @else if $grid-type == margin-offset {
            @if $gutter and unit($gutter) == '%' {
                $flex-basis: (100% - ($gutter * ($grid-columns / $col - 1))) / ($grid-columns / $col);
            } @else if $gutter and unitless($gutter) == false {
                $flex-basis: calc( #{$flex-basis} - #{$gutter * ($grid-columns / $col - 1) / ($grid-columns / $col)} );
            }
        }

        @if $col-offset and unit($col-offset) == '%' {
            $flex-basis: $flex-basis + $col-offset;
        } @else if $col-offset and unitless($col-offset) == false {
            $flex-basis: calc( #{$flex-basis} + #{$col-offset} );
        }
    } @else if type-of($col) == number and unitless($col) == false {
        $flex-grow: 0;
        $flex-shrink: 0;
        $flex-basis: $col;
    } @else if type-of($col) == string and $col == 'auto' {
        $flex-grow: 1;
        $flex-shrink: 1;
        $flex-basis: auto;
        max-width: 100%;
        width: auto;
    } @else if type-of($col) == string and $col == 'equal' {
        // flex: 1
        $flex-grow: 1;
        $flex-shrink: 1;
        $flex-basis: 0;
    } @else if type-of($col) == string and $col == 'none' {
        // flex: none
        $flex-grow: 0;
        $flex-shrink: 0;
        $flex-basis: auto;
    } @else if type-of($col) == string and $col == 'initial' {
        // flex: initial
        $flex-grow: 0;
        $flex-shrink: 1;
        $flex-basis: auto;
    } @else if type-of($col) == string and $col == 'breakpoint' {
        $flex-grow: 0;
        $flex-shrink: 1;
        $flex-basis: auto;
        width: 100%;
    }

    flex: $flex-grow $flex-shrink $flex-basis;

    @if $align-self {
        align-self: $align-self;
    }

    @if type-of($order) == number {
        order: $order;
    }

    @if $gutter and unitless($gutter) == false {
        @if $grid-type == skeleton {
            @if $condensed == true {
                @include grid-gutter($margin: 0 $gutter / 2);
            } @else {
                @include grid-gutter($margin: 0 $gutter / 2 $gutter);
            }
        } @else if $grid-type == margin-offset {
            @if type-of($col) == string and $col == 'breakpoint' {
                @include grid-gutter($margin-right: 0);
            } @else if $last-child {
                @include grid-gutter($margin-right: 0);
            } @else {
                @include grid-gutter($margin-right: $gutter);
            }

            @if $condensed == false {
                @include grid-gutter($margin-bottom: $gutter);
            }
        }
    }

    @content;
}

我不明白这个 mixin 中的所有参数是什么意思，例如$condensed: false,。我使用过 flexbox 和 Scss 很多次，但我只是觉得这个 mixin 有点超出我的能力。

具体来说，我很难理解 mixin 的这一部分：

@else if $grid-type == margin-offset {
    @if $gutter and unit($gutter) == '%' {
        $flex-basis: (100% - ($gutter * ($grid-columns / $col - 1))) / ($grid-columns / $col);
    } @else if $gutter and unitless($gutter) == false {
        $flex-basis: calc( #{$flex-basis} - #{$gutter * ($grid-columns / $col - 1) / ($grid-columns / $col)} );
    }
}

有人可以向我解释这部分吗？

Answer 1

这是您文件的标题：

// ============================================== =======================
// Flexbox Grid Mixins
// 版本 0.1.3
// 说明：Sass Mixins 生成 Flexbox 网格
// 作者：thingsym
// GitHub：https://github.com/thingsym/flexbox-grid-mixins
// 麻省理工学院许可证
// ================================================= ====================

您可以在此文件的来源找到更多信息：https://github.com/thingsym/flexbox-grid-mixins

有一个文档和一些示例，但是在克隆了那个 repo 之后，我找不到一个差异......哦，就是这样。截图如下。

skeleton：每个列/块都有一个左右共享的水平边距（看到左右两边网格外的浅蓝色？列边距）。
例如.grid > .grid__col-5 { margin: 0 1% 2% }
装订线由左侧列的右边距 + 右侧列的左边距组成。

margin-offset：每个列/块都有右边距，没有左边距。最后一个孩子没有右边距。
示例：.grid-margin-offset > .grid__col-5 { margin-right: 2% }（和底部边距：2% 并覆盖 :last-child）
装订线完全由左侧列的右边距构成。

Flex-basis 是不同的，因为首先，容器有不同的宽度（skeleton 外面的浅蓝色）......这就是 mixin 的原因