diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index e53ab34148ed55038c76dcb4adfb9631d54c17ae..29573b3b2e5f2f3608cb1adcc618d1a99c6322c6 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -23,6 +23,7 @@
 @import "mixins/resize";
 @import "mixins/screen-reader";
 @import "mixins/size";
+@import "mixins/spacer";
 @import "mixins/tab-focus";
 @import "mixins/reset-text";
 @import "mixins/text-emphasis";
diff --git a/scss/mixins/_spacer.scss b/scss/mixins/_spacer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5f8f68ad309457dcc3fd7241141672cef9725593
--- /dev/null
+++ b/scss/mixins/_spacer.scss
@@ -0,0 +1,67 @@
+@mixin spacer($abbrev: "p", $sides: "", $size: 1, $important: false) {
+
+  @if ($sides == "x") {
+
+    @include spacer($abbrev, "r", $size, $important);
+    @include spacer($abbrev, "l", $size, $important);
+
+  } @else if ($sides == "y") {
+
+    @include spacer($abbrev, "t", $size, $important);
+    @include spacer($abbrev, "b", $size, $important);
+
+  } @else {
+
+    $lengths:    map-get($spacers, $size);
+
+    $length-x:   map-get($lengths, x);
+    $length-y:   map-get($lengths, y);
+
+    $prop:      "padding";
+
+    @if ($abbrev == "m") {
+
+      $prop: "margin";
+
+    }
+
+    $prop-sides: "";
+    $length:     $length-y $length-x;
+
+    @if ($length-x == $length-y) {
+      $length: $length-x;
+    }
+
+    @if ($sides == "t") {
+
+      $prop-sides:  "-top";
+      $length:      $length-y;
+
+    } @else if ($sides == "r") {
+
+      $prop-sides:  "-right";
+      $length:      $length-x;
+
+    } @else if ($sides == "b") {
+
+      $prop-sides:  "-bottom";
+      $length:      $length-y;
+
+    } @else if ($sides == "l") {
+
+      $prop-sides:  "-left";
+      $length:      $length-x;
+
+    }
+
+    $_important: "";
+
+    @if ($important) {
+      $_important: " !important";
+    }
+
+    #{$prop}#{$prop-sides}: $length#{$_important};
+
+  }
+
+}
diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss
index 99c98f87bdf75443eff23513e0bb6a551b18c806..dc8b9a52fb4504df8a25f628d8e7d3d8807c8efc 100644
--- a/scss/utilities/_spacing.scss
+++ b/scss/utilities/_spacing.scss
@@ -12,23 +12,8 @@
 
 @each $prop, $abbrev in (margin: m, padding: p) {
   @each $size, $lengths in $spacers {
-    $length-x:   map-get($lengths, x);
-    $length-y:   map-get($lengths, y);
-
-    .#{$abbrev}-#{$size} { #{$prop}:        $length-y $length-x !important; } // a = All sides
-    .#{$abbrev}t-#{$size} { #{$prop}-top:    $length-y !important; }
-    .#{$abbrev}r-#{$size} { #{$prop}-right:  $length-x !important; }
-    .#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; }
-    .#{$abbrev}l-#{$size} { #{$prop}-left:   $length-x !important; }
-
-    // Axes
-    .#{$abbrev}x-#{$size} {
-      #{$prop}-right:  $length-x !important;
-      #{$prop}-left:   $length-x !important;
-    }
-    .#{$abbrev}y-#{$size} {
-      #{$prop}-top:    $length-y !important;
-      #{$prop}-bottom: $length-y !important;
+    @each $side in ("", "x", "y", "t", "r", "b", "l") {
+      .#{$abbrev}#{$side}-#{$size} { @include spacer($abbrev, $side, $size, true); }
     }
   }
 }