Reduce number of spacing rules (#23208)

* reduce # of spacing rules by combining x & y with t r b l

* Remove unnecessary spaces

diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss
index c89816b5efc968053f1cb8d505ee4e2b1f336f8a..61af0c66d11ef13532bbbd427c0787dc47affb3e 100644 (file)
--- a/scss/utilities/_spacing.scss
+++ b/scss/utilities/_spacing.scss
@@ -8,34 +8,42 @@
       @each $size, $length in $spacers {
 
         .#{$abbrev}#{$infix}-#{$size}  { #{$prop}:        $length !important; }
-        .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top:    $length !important; }
-        .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right:  $length !important; }
-        .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length !important; }
-        .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left:   $length !important; }
+        .#{$abbrev}t#{$infix}-#{$size},
+        .#{$abbrev}y#{$infix}-#{$size} {
+          #{$prop}-top: $length !important;
+        }
+        .#{$abbrev}r#{$infix}-#{$size},
         .#{$abbrev}x#{$infix}-#{$size} {
           #{$prop}-right: $length !important;
-          #{$prop}-left:  $length !important;
         }
+        .#{$abbrev}b#{$infix}-#{$size},
         .#{$abbrev}y#{$infix}-#{$size} {
-          #{$prop}-top:    $length !important;
           #{$prop}-bottom: $length !important;
         }
+        .#{$abbrev}l#{$infix}-#{$size},
+        .#{$abbrev}x#{$infix}-#{$size} {
+          #{$prop}-left: $length !important;
+        }
       }
     }
 
     // Some special margin utils
     .m#{$infix}-auto  { margin:        auto !important; }
-    .mt#{$infix}-auto { margin-top:    auto !important; }
-    .mr#{$infix}-auto { margin-right:  auto !important; }
-    .mb#{$infix}-auto { margin-bottom: auto !important; }
-    .ml#{$infix}-auto { margin-left:   auto !important; }
+    .mt#{$infix}-auto,
+    .my#{$infix}-auto {
+      margin-top: auto !important;
+    }
+    .mr#{$infix}-auto,
     .mx#{$infix}-auto {
       margin-right: auto !important;
-      margin-left:  auto !important;
     }
+    .mb#{$infix}-auto,
     .my#{$infix}-auto {
-      margin-top:    auto !important;
       margin-bottom: auto !important;
     }
+    .ml#{$infix}-auto,
+    .mx#{$infix}-auto {
+      margin-left: auto !important;
+    }
   }
 }