Merge pull request #141 from locomotivemtl/feature/optimize-grid

Optimise grid-column loops / Use css vars for grid columns

assets.json

@@ -1,3 +1,3 @@
 {
-    "version": 1673639671975
+    "version": 1675951563987
 }

assets/styles/objects/_grid.scss

@@ -169,7 +169,8 @@
 // By default, a grid item takes full width of its parent.
 //
 .o-grid_item {
-    grid-column: 1 / -1;
+    grid-column-start: var(--gc-start, 1);
+    grid-column-end: var(--gc-end, -1);
 
     &.-align-end {
         align-self: end;

assets/styles/utilities/_grid-column.scss

@@ -13,48 +13,26 @@ $colsMax: $base-column-nb + 1;
 
 $breakpoints: (
     "null" null,
-    "from-tiny" "from-tiny",
-    "from-small" "from-small",
-    "from-medium" "from-medium",
-    "from-large" "from-large",
-    "from-big" "from-big"
+    "from-tiny" $from-tiny,
+    "from-small" $from-small,
+    "from-medium" $from-medium,
+    "from-large" $from-large,
+    "from-big" $from-big
 ) !default;
 
-@each $breakpoint-namespace, $breakpoint in $breakpoints {
+@each $breakpoint, $mediaquery in $breakpoints {
     @for $fromIndex from 1 through $colsMax {
         @for $toIndex from 1 through $colsMax {
-            @if $breakpoint == null {
+            @if $mediaquery == null {
                 .u-gc-#{$fromIndex}\/#{$toIndex} {
-                    grid-column-start: #{$fromIndex};
-                    grid-column-end: #{$toIndex};
+                    --gc-start: #{$fromIndex};
+                    --gc-end: #{$toIndex};
                 }
             } @else {
                 .u-gc-#{$fromIndex}\/#{$toIndex}\@#{$breakpoint} {
-                    @if $breakpoint-namespace == "from-tiny" {
-                        @media (min-width: $from-tiny) {
-                            grid-column-start: #{$fromIndex};
-                            grid-column-end: #{$toIndex};
-                        }
-                    } @else if $breakpoint-namespace == "from-small" {
-                        @media (min-width: $from-small) {
-                            grid-column-start: #{$fromIndex};
-                            grid-column-end: #{$toIndex};
-                        }
-                    } @else if $breakpoint-namespace == "from-medium" {
-                        @media (min-width: $from-medium) {
-                            grid-column-start: #{$fromIndex};
-                            grid-column-end: #{$toIndex};
-                        }
-                    } @else if $breakpoint-namespace == "from-large" {
-                        @media (min-width: $from-large) {
-                            grid-column-start: #{$fromIndex};
-                            grid-column-end: #{$toIndex};
-                        }
-                    } @else if $breakpoint-namespace == "from-big" {
-                        @media (min-width: $from-big) {
-                            grid-column-start: #{$fromIndex};
-                            grid-column-end: #{$toIndex};
-                        }
+                    @media (min-width: #{$mediaquery}) {
+                        --gc-start: #{$fromIndex};
+                        --gc-end: #{$toIndex};
                     }
                 }
             }