scss-framework/mixin/_layout.scss

@use 'sass:list';
@use 'sass:math';

/*
  @include layout(column, [
    ("m" "full" (
      ((0 0) (0 0) (1 1) (0 0)) (0 50%)
    ),
    (0 "m" (
      ((0 0)) (100% 100%)
    )
  ], (1rem 1rem));

  @include layout($flex-direction, [
    ($bpMinWidth $bpMaxWidth (
      ((flex:), ...))
      ((minmax:))
    )
  ], (gapRow gapColumn);
*/
@mixin layout($direction, $bpColumns: [], $gap: (0 0)) {
  display: flex;
  justify-content: space-between;
  flex-direction: $direction;
  align-items: stretch;
  align-content: stretch;
  flex-wrap: wrap;

  $columnGap: list.nth($gap, 1);
  $rowGap: 0;
  @if list.length($gap) == 2 {
      $rowGap: list.nth($gap, 2);
  }
  column-gap: $columnGap;
  row-gap: $rowGap;

  & > * {
    flex: 0 0 auto;
  }

  @if list.length($bpColumns) > 0 {
    @for $bpIndex from 1 through list.length($bpColumns) {
      $bp: list.nth($bpColumns, $bpIndex);
      @include breakpoint('screen', list.nth($bp, 1), list.nth($bp, 2)) {

        @if list.length($bp) >= 3 {
          $flex: list.nth($bp, 3);
          @for $i from 1 through list.length($flex) {
            $flexGrowShrink: list.nth($flex, $i);
            $grow: 0;
            $shrink: 0;
            @if list.length($flexGrowShrink) >= 1 {
              $grow: list.nth($flexGrowShrink, 1);
            }
            @if list.length($flexGrowShrink) == 2 {
              $shrink: list.nth($flexGrowShrink, 2);
            }
            $length: list.length($flex);
            $childs: $length + 'n+' + $i;

            & > *:nth-child(#{$childs}) {
              flex: $grow $shrink auto;
            }
          }
        }

        @if list.length($bp) == 4 {
          $columns: list.nth($bp, 4);
          @for $i from 1 through list.length($columns) {
            $minmax: list.nth($columns, $i);
            $min: list.nth($minmax, 1);
            $max: $min;
            @if list.length($minmax) == 2 {
              $max: list.nth($minmax, 2);
            }
            $length: list.length($columns);
            $childs: $length + 'n+' + $i;

            @if math.unit($min) != "" {
              @if $direction == 'row' {
                @if $rowGap > 0 {
                  $min: calc(#{$min} - (#{$rowGap} / #{$length}));
                }
              }
              @if $direction == 'column' {
                @if $columnGap > 0 {
                  $min: calc(#{$min} - (#{$columnGap} / #{$length}));
                }
              }
            }

            @if math.unit($max) != "" {
              @if $direction == 'row' {
                @if $rowGap > 0 {
                  $max: calc(#{$max} - (#{$rowGap} / #{$length}));
                }
              }
              @if $direction == 'column' {
                @if $columnGap > 0 {
                  $max: calc(#{$max} - (#{$columnGap} / #{$length}));
                }
              }
            }

            & > *:nth-child(#{$childs}) {
              @if $direction == 'row' and $min != 0 {
                min-width: $min;
              } @else if $min > 0 {
                min-height: $min;
              }
              @if $direction == 'row' and $max != 0 {
                max-width: $max;
              } @else if $max > 0 {
                max-height: $max;
              }
            }
          }
        }
      }
    }
  }
}