Question

我发现了一个用于弹性框架/网格布局的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的这一部分：

@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
  // MIT许可证
  // ================================================ ===================

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

有一个文档和一些例子，但在克隆那个回购后，我找不到一个差异......哦，它就是。截图如下。

skeleton：每个列/块在左右之间共享一个水平边距（请看左边和右边的网格外部的浅蓝色？列的边距）。
例如，.grid > .grid__col-5 { margin: 0 1% 2% }为排水沟由左侧栏的右边缘和右侧栏的左边缘组成。

margin-offset：每个列/块都有一个右边距，没有左边距。最后一个孩子没有合适的保证金示例：.grid-margin-offset > .grid__col-5 { margin-right: 2% }（和margin-bottom：2％并覆盖：last-child）
排水沟完全由左侧立柱的右边缘构成。

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

这种混合Flexbox /网格布局SCSS mixin如何工作？

1 个答案: