init

mixin/_layout.scss

@@ -0,0 +1,67 @@
+@use 'sass:list';
+@use 'sass:math';
+
+/*
+  @include layout(column, [
+    (0 "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;
+  column-gap: list.nth($gap, 1);
+  row-gap: list.nth($gap, 2);
+
+  @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: list.nth($minmax, 2);
+          & > *:nth-child(#{$i}) {
+            @if math.unit($min) == "" and math.unit($max) == "" {
+              flex: $max $min min-content;
+            } @else if math.unit($min) == "" {
+              flex: 1 $min auto;
+            } @else if math.unit($max) == "" {
+              flex: $max 0 auto;
+            } @else {
+              flex: 1 0 auto;
+            }
+
+            @if math.unit($min) != "" {
+              @if $direction == 'row' {
+                min-width: $min;
+              } @else {
+                min-height: $min;
+              }
+            }
+
+            @if math.unit($max) != "" {
+              @if $direction == 'row' {
+                max-width: $max;
+              } @else {
+                max-height: $max;
+              }
+            }
+          }
+        }
+      }
+    }
+  } @else {
+    & > * {
+      flex: 1 0 auto;
+    }
+  }
+}