@use 'sass:list'; @use 'sass:math'; /* @include layout(column, [ ("m" "full" ((0 0) (0 0) (1 1) (0 0))) ]); @include layout($flex-direction, [ ($bpMinWidth $bpMaxWidth ((flex:), ...))) ]); */ @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: 1 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)) { $columns: list.nth($bp, 3); @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} - #{math.div($rowGap, list.length($columns) - 1)}); } } @if $direction == 'column' { @if $columnGap > 0 { $min: calc(#{$min} - #{math.div($columnGap, list.length($columns) - 1)}); } } } @if math.unit($max) != "" { @if $direction == 'row' { @if $rowGap > 0 { $max: calc(#{$max} - #{math.div($rowGap, list.length($columns) - 1)}); } } @if $direction == 'column' { @if $columnGap > 0 { $max: calc(#{$max} - #{math.div($columnGap, list.length($columns) - 1)}); } } } & > *:nth-child(#{$childs}) { flex: $max $min auto; @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; } } } } } } }