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

Question

我找到了一个flexbox/grid layout的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; 
} 

我不明白这个混入所有参数的意思做，例如$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 0.3
//描述：萨斯混入生成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％并覆盖最后一个孩子）
排水沟完全由左侧列的右边距组成。

Flex的基础，是因为摆在首位不同，容器具有不同宽度（即lightblue外骨架）...和它是混入