Handle breakpoints additionally

Author: lazarkulasevic

scss/utils/_config.scss

@@ -5,3 +5,12 @@ $spacing: (
     "xs": 8px,
     "none": 0px
 );
+
+$breakpoints: (
+    "xs": 375px,
+    "sm": 480px,
+    "md": 768px,
+    "lg": 1080px,
+    "xl": 1440px,
+    "xxl": 1920px
+);

scss/utils/_mixins.scss

@@ -0,0 +1,5 @@
+@mixin validate-unit($value, $value-type, $units...) {
+    @if type-of($value) != $value-type or index($units, unit($value)) == null {
+        @error "Invalid unit #{unit($value)} for value #{$value}.";
+    }
+}

scss/utils/_spacing.scss

@@ -1,37 +1,71 @@
+@use "sass:map";
+@use "sass:math";
 @use "config" as *;
+@use "mixins" as *;
 
 $selectors: ("m": margin, "p": padding);
 $directions: ("t": top, "b": bottom, "l": left, "r": right);
 $axes: "y", "x";
 
-@each $prefix, $selector in $selectors {
-    @each $suffix, $space in $spacing {
-        .#{$prefix}-#{$suffix} {
-            #{$selector}: #{$space} !important;
-        }
-    }
-}
+$breakpoint-values: map.values($breakpoints);
+$min-breakpoint: math.min($breakpoint-values...);
+
+@each $breakpoint, $breakpoint-value in $breakpoints {
+    @if $breakpoint-value == $min-breakpoint {
+        @each $prefix, $selector in $selectors {
+            @each $suffix, $space in $spacing {
+                @include validate-unit($space, number, px, em, rem);
 
-@each $prefix, $selector in $selectors {
-    @each $abbr-dir, $direction in $directions {
-        @each $suffix, $space in $spacing {
-            .#{$prefix}#{$abbr-dir}-#{$suffix} {
-                #{$selector}-#{$direction}: #{$space} !important;
+                @each $abbr-dir, $direction in $directions {
+                    .#{$prefix}#{$abbr-dir}-#{$suffix} {
+                        #{$selector}-#{$direction}: #{$space} !important;
+                    }
+                }
+
+                @each $axis in $axes {
+                    .#{$prefix}#{$axis}-#{$suffix} {
+                        @if $axis == "y" {
+                            #{$selector}-top: #{$space} !important;
+                            #{$selector}-bottom: #{$space} !important;
+                        } @else if $axis == "x" {
+                            #{$selector}-left: #{$space} !important;
+                            #{$selector}-right: #{$space} !important;
+                        }
+                    }
+                }
+
+                .#{$prefix}-#{$suffix} {
+                    #{$selector}: #{$space} !important;
+                }
             }
         }
-    }
-}
+    } @else {
+        @media (min-width: $breakpoint-value) {
+            @each $prefix, $selector in $selectors {
+                @each $suffix, $space in $spacing {
+                    @include validate-unit($space, number, px, em, rem);
+
+                    @each $abbr-dir, $direction in $directions {
+                        .#{$prefix}#{$abbr-dir}-#{$breakpoint}-#{$suffix} {
+                            #{$selector}-#{$direction}: #{$space} !important;
+                        }
+                    }
+
+                    @each $axis in $axes {
+                        .#{$prefix}#{$axis}-#{$breakpoint}-#{$suffix} {
+                            @if $axis == "y" {
+                                #{$selector}-top: #{$space} !important;
+                                #{$selector}-bottom: #{$space} !important;
+                            } @else if $axis == "x" {
+                                #{$selector}-left: #{$space} !important;
+                                #{$selector}-right: #{$space} !important;
+                            }
+                        }
+                    }
 
-@each $prefix, $selector in $selectors {
-    @each $axis in $axes {
-        @each $suffix, $space in $spacing {
-            .#{$prefix}#{$axis}-#{$suffix} {
-                @if $axis == "y" {
-                    #{$selector}-top: #{$space} !important;
-                    #{$selector}-bottom: #{$space} !important;
-                } @else if $axis == "x" {
-                    #{$selector}-left: #{$space} !important;
-                    #{$selector}-right: #{$space} !important;
+                    .#{$prefix}-#{$breakpoint}-#{$suffix} {
+                        #{$selector}: #{$space} !important;
+                    }
                 }
             }
         }