這種混合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外骨架）...和它是混入