diff --git a/src/scss/spacers/_margin.scss b/src/scss/spacers/_margin.scss
new file mode 100644
index 00000000..fbc7bd9f
--- /dev/null
+++ b/src/scss/spacers/_margin.scss
@@ -0,0 +1,84 @@
+$margin-levels: (
+  '0': 0,
+  '1': 1rem,
+  '2': 2rem,
+  '3': 3rem,
+  '4': 4rem,
+  '5': 5rem,
+  '6': 6rem,
+  '7': 7rem,
+  '8': 8rem,
+) !default;
+
+@each $level, $value in $margin-levels {
+  .m-#{$level} {
+    margin: $value;
+  }
+  .mt-#{$level} {
+    margin-top: $value;
+  }
+  .mr-#{$level} {
+    margin-right: $value;
+  }
+  .mb-#{$level} {
+    margin-bottom: $value;
+  }
+  .ml-#{$level} {
+    margin-left: $value;
+  }
+  .mx-#{$level} {
+    margin-right: $value;
+    margin-left: $value;
+  }
+  .my-#{$level} {
+    margin-top: $value;
+    margin-bottom: $value;
+  }
+
+  .\!m-#{$level} {
+    margin: $value !important;
+  }
+  .\!mt-#{$level} {
+    margin-top: $value !important;
+  }
+  .\!mr-#{$level} {
+    margin-right: $value !important;
+  }
+  .\!mb-#{$level} {
+    margin-bottom: $value !important;
+  }
+  .\!ml-#{$level} {
+    margin-left: $value !important;
+  }
+  .\!mx-#{$level} {
+    margin-right: $value !important;
+    margin-left: $value !important;
+  }
+  .\!my-#{$level} {
+    margin-top: $value !important;
+    margin-bottom: $value !important;
+  }
+}
+
+.m-auto {
+  margin: auto;
+}
+.mx-auto {
+  margin-right: auto;
+  margin-left: auto;
+}
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.\!m-auto {
+  margin: auto !important;
+}
+.\!mx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+.\!my-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
diff --git a/src/scss/spacers/_padding.scss b/src/scss/spacers/_padding.scss
new file mode 100644
index 00000000..5f575c46
--- /dev/null
+++ b/src/scss/spacers/_padding.scss
@@ -0,0 +1,61 @@
+$padding-levels: (
+  '0': 0,
+  '1': 0.5rem,
+  '2': 1rem,
+  '3': 1.75rem,
+  '4': 2.25rem,
+  '5': 3rem,
+  '6': 4rem,
+  '7': 5rem,
+  '8': 6rem,
+) !default;
+
+@each $level, $value in $padding-levels {
+  .p-#{$level} {
+    padding: $value;
+  }
+  .pt-#{$level} {
+    padding-top: $value;
+  }
+  .pr-#{$level} {
+    padding-right: $value;
+  }
+  .pb-#{$level} {
+    padding-bottom: $value;
+  }
+  .pl-#{$level} {
+    padding-left: $value;
+  }
+  .px-#{$level} {
+    padding-right: $value;
+    padding-left: $value;
+  }
+  .py-#{$level} {
+    padding-top: $value;
+    padding-bottom: $value;
+  }
+
+  .\!p-#{$level} {
+    padding: $value !important;
+  }
+  .\!pt-#{$level} {
+    padding-top: $value !important;
+  }
+  .\!pr-#{$level} {
+    padding-right: $value !important;
+  }
+  .\!pb-#{$level} {
+    padding-bottom: $value !important;
+  }
+  .\!pl-#{$level} {
+    padding-left: $value !important;
+  }
+  .\!px-#{$level} {
+    padding-right: $value !important;
+    padding-left: $value !important;
+  }
+  .\!py-#{$level} {
+    padding-top: $value !important;
+    padding-bottom: $value !important;
+  }
+}
diff --git a/src/scss/spacers/_rules.scss b/src/scss/spacers/_rules.scss
index 6bab3f4d..fc93cc64 100644
--- a/src/scss/spacers/_rules.scss
+++ b/src/scss/spacers/_rules.scss
@@ -1,65 +1,2 @@
-@import 'variables';
-
-@each $level, $value in $margin-levels {
-  .m-#{$level} {
-    margin: $value !important;
-  }
-  .mt-#{$level} {
-    margin-top: $value !important;
-  }
-  .mr-#{$level} {
-    margin-right: $value !important;
-  }
-  .mb-#{$level} {
-    margin-bottom: $value !important;
-  }
-  .ml-#{$level} {
-    margin-left: $value !important;
-  }
-  .mx-#{$level} {
-    margin-right: $value !important;
-    margin-left: $value !important;
-  }
-  .my-#{$level} {
-    margin-top: $value !important;
-    margin-bottom: $value !important;
-  }
-}
-
-.m-auto {
-  margin: auto !important;
-}
-.mx-auto {
-  margin-right: auto !important;
-  margin-left: auto !important;
-}
-.my-auto {
-  margin-top: auto !important;
-  margin-bottom: auto !important;
-}
-
-@each $level, $value in $padding-levels {
-  .p-#{$level} {
-    padding: $value !important;
-  }
-  .pt-#{$level} {
-    padding-top: $value !important;
-  }
-  .pr-#{$level} {
-    padding-right: $value !important;
-  }
-  .pb-#{$level} {
-    padding-bottom: $value !important;
-  }
-  .pl-#{$level} {
-    padding-left: $value !important;
-  }
-  .px-#{$level} {
-    padding-right: $value !important;
-    padding-left: $value !important;
-  }
-  .py-#{$level} {
-    padding-top: $value !important;
-    padding-bottom: $value !important;
-  }
-}
+@import 'margin';
+@import 'padding';
diff --git a/src/scss/spacers/_variables.scss b/src/scss/spacers/_variables.scss
deleted file mode 100644
index 63d6cbc7..00000000
--- a/src/scss/spacers/_variables.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-$margin-levels: (
-  '0': 0,
-  '1': 1rem,
-  '2': 2rem,
-  '3': 3rem,
-  '4': 4rem,
-  '5': 5rem,
-  '6': 6rem,
-) !default;
-
-$padding-levels: (
-  '0': 0,
-  '1': 0.5rem,
-  '2': 1rem,
-  '3': 1.75rem,
-  '4': 2.25rem,
-  '5': 3rem,
-  '6': 4rem,
-) !default;