diff --git a/assets/sass/_sass_variables.scss b/assets/sass/_sass_variables.scss
index 0ecc6b4..bc75b77 100644
--- a/assets/sass/_sass_variables.scss
+++ b/assets/sass/_sass_variables.scss
@@ -50,9 +50,7 @@ $breakpoints: (
   'xxxs':     333px,
 );
 
-/* Spacing
-Generates mt--m (mt = margin-top), mb--m (mb = margin-bottom) and
-mx--m (mx = margin-block) classes. */
+/* Spacing (Deprecated in v5, use spacing css variables instead.)
 $spacing: (
   xxl:        3,
   xl:         2,
diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss
index ab8fbfd..3b98ae6 100644
--- a/assets/sass/_variables.scss
+++ b/assets/sass/_variables.scss
@@ -78,7 +78,9 @@
   --fw-light: 300;
   --fw-lighter: 200;
 
-  /* Spacing. */
+  /* Spacing.
+  Generates mt--m (mt = margin-top), mb--m (mb = margin-bottom) and
+  mx--m (mx = margin-block) classes. */
   --spacing-xxl: calc(3rem * var(--base-line-height));
   --spacing-xl: calc(2rem * var(--base-line-height));
   --spacing-l: calc(1.5rem * var(--base-line-height));
diff --git a/assets/sass/components/spacing/_spacing.scss b/assets/sass/components/spacing/_spacing.scss
index 420270a..8f4de34 100644
--- a/assets/sass/components/spacing/_spacing.scss
+++ b/assets/sass/components/spacing/_spacing.scss
@@ -1,13 +1,95 @@
-@each $name, $space in $spacing {
-  .mt--#{$name} {
-    @include margin-block-start($space);
-  }
-
-  .mb--#{$name} {
-    @include margin-block-end($space);
-  }
-
-  .mx--#{$name} {
-    @include margin-block($space);
-  }
+.mt--xxl {
+  margin-block-start: var(--spacing-xxl);
+}
+
+.mt--xl {
+  margin-block-start: var(--spacing-xl);
+}
+
+.mt--l {
+  margin-block-start: var(--spacing-l);
+}
+
+.mt--m {
+  margin-block-start: var(--spacing-m);
+}
+
+.mt--s {
+  margin-block-start: var(--spacing-s);
+}
+
+.mt--xs {
+  margin-block-start: var(--spacing-xs);
+}
+
+.mt--xss {
+  margin-block-start: var(--spacing-xss);
+}
+
+.mt--0 {
+  margin-block-start: 0;
+}
+
+.mb--xxl {
+  margin-block-end: var(--spacing-xll);
+}
+
+.mb--xl {
+  margin-block-end: var(--spacing-xl);
+}
+
+.mb--l {
+  margin-block-end: var(--spacing-l);
+}
+
+.mb--m {
+  margin-block-end: var(--spacing-m);
+}
+
+.mb--s {
+  margin-block-end: var(--spacing-s);
+}
+
+.mb--xs {
+  margin-block-end: var(--spacing-xs);
+}
+
+.mb--xxs {
+  margin-block-end: var(--spacing-xss);
+}
+
+.mb--0 {
+  margin-block-end: 0;
+}
+
+.mx--xxl {
+  margin-block: var(--spacing-xll);
+}
+
+.mx--xl {
+  margin-block: var(--spacing-xl);
+}
+
+.mx--l {
+  margin-block: var(--spacing-l);
+}
+
+.mx--m {
+  margin-block: var(--spacing-m);
+}
+
+.mx--s {
+  margin-block: var(--spacing-s);
+}
+
+.mx--xs {
+  margin-block: var(--spacing-xs);
+}
+
+.mx--xss {
+  margin-block: var(--spacing-xss);
+}
+
+.mx--0 {
+  margin-block: 0;
 }