Add config.spacers and modify spacing function to add breakpoint based spacers.

assets.json

@@ -1,3 +1,3 @@
 {
-    "version": 1686579707135
+    "version": 1686842849362
 }

assets/styles/main.scss

@@ -21,6 +21,7 @@
 @import "settings/config.colors";
 @import "settings/config.eases";
 @import "settings/config.fonts";
+@import "settings/config.spacers";
 @import "settings/config.timings";
 @import "settings/config.zindexes";
 @import "settings/config";
@@ -72,5 +73,5 @@
 // @import "utilities/align";
 // @import "utilities/helpers";
 // @import "utilities/states";
-// @import "utilities/spacing";
+@import "utilities/spacing";
 // @import "utilities/print";

assets/styles/settings/_config.spacers.scss

@@ -0,0 +1,40 @@
+// ==========================================================================
+// Settings / Config / Spacers
+// ==========================================================================
+
+// Spacers
+// ==========================================================================
+
+$spacers: (
+    'gutter':       var(--grid-gutter),
+    'gutter-2x':    calc(2 * var(--grid-gutter)),
+    'xs':           #{vh(5)},
+    'sm':           #{vh(7.5)},
+    'md':           #{vh(10)},
+    'lg':           #{vh(12.5)},
+    'xl':           #{vh(15)},
+);
+
+// Function
+// ==========================================================================
+
+// Returns spacer.
+//
+// ```scss
+// .c-box {
+//     margin-top: spacer(gutter);
+// }
+// ```
+//
+// @param  {string} $key - The spacer key in $spacers.
+// @return {size}
+
+@function spacer($spacer) {
+    @if not map-has-key($spacers, $spacer) {
+        @error "Unknown master spacer: #{$spacer}";
+    }
+
+    $index: map-get($spacers, $spacer);
+
+    @return $index;
+}

assets/styles/utilities/_spacing.scss

@@ -26,8 +26,8 @@ $spacing-directions: (
     '-right':      '-right',
     '-bottom':     '-bottom',
     '-left':       '-left',
-    '-horizontal': '-left' '-right',
+    '-x':          '-left' '-right',
-    '-vertical':   '-top'  '-bottom',
+    '-y':          '-top'  '-bottom',
 ) !default;
 
 $spacing-properties: (
@@ -35,19 +35,41 @@ $spacing-properties: (
     'margin':  'margin',
 ) !default;
 
-$spacing-sizes: (
+$spacing-sizes: join($spacers, (
-    null:     $unit,
+    null:       var(--grid-gutter),
-    '-double': $unit * 2,
+    'none':    0
-    '-small': $unit-small,
+));
-    '-none':  0px
-) !default;
 
-@each $property-namespace, $property in $spacing-properties {
+@each $breakpoint, $mediaquery in $breakpoints {
-    @each $direction-namespace, $direction-rules in $spacing-directions {
+    @each $property-namespace, $property in $spacing-properties {
-        @each $size-namespace, $size in $spacing-sizes {
+        @each $direction-namespace, $direction-rules in $spacing-directions {
-            .u-#{$property-namespace}#{$direction-namespace}#{$size-namespace} {
+            @each $size-namespace, $size in $spacing-sizes {
-                @each $direction in $direction-rules {
+
-                    #{$property}#{$direction}: rem($size) !important;
+                // Spacer without media query
+                @if $breakpoint == "tiny" {
+                    .u-#{$property-namespace}#{$direction-namespace}-#{$size-namespace} {
+                        @each $direction in $direction-rules {
+                            #{$property}#{$direction}: $size !important;
+                        }
+                    }
+                }
+
+                // Spacer min-width breakpoints `@from-*`
+                .u-#{$property-namespace}#{$direction-namespace}-#{$size-namespace}\@from-#{$breakpoint} {
+                    @media #{mq-min($breakpoint)} {
+                        @each $direction in $direction-rules {
+                            #{$property}#{$direction}: $size !important;
+                        }
+                    }
+                }
+
+                // Spacer max-width breakpoints @to-*`
+                .u-#{$property-namespace}#{$direction-namespace}-#{$size-namespace}\@to-#{$breakpoint} {
+                    @media #{mq-max($breakpoint)} {
+                        @each $direction in $direction-rules {
+                            #{$property}#{$direction}: $size !important;
+                        }
+                    }
                 }
             }
         }