diff --git a/src/generators.less b/src/generators.less
index 9106e53b7..2f4d2afbc 100644
--- a/src/generators.less
+++ b/src/generators.less
@@ -28,3 +28,5 @@
 @import "generators/text-colors";
 @import "generators/text-weights";
 @import "generators/text-sizes";
+
+@import "generators/spacing";
diff --git a/src/generators/spacing.less b/src/generators/spacing.less
new file mode 100644
index 000000000..e5c78d759
--- /dev/null
+++ b/src/generators/spacing.less
@@ -0,0 +1,206 @@
+.generate-padding-utilities(@padding-scale; @i: 1) when (@i <= length(@padding-scale)) {
+  @spacer: extract(@padding-scale, @i);
+
+  @n: extract(@spacer, 1);
+  @size: extract(@spacer, 2);
+
+  .define-selector(~"pt-@{n}", { padding-top: @size; });
+  .define-selector(~"pr-@{n}", { padding-right: @size; });
+  .define-selector(~"pb-@{n}", { padding-bottom: @size; });
+  .define-selector(~"pl-@{n}", { padding-left: @size; });
+  .define-selector(~"py-@{n}", {
+    padding-top: @size;
+    padding-bottom: @size;
+  });
+  .define-selector(~"px-@{n}", {
+    padding-right: @size;
+    padding-left: @size;
+  });
+  .define-selector(~"p-@{n}", {
+    padding-top: @size;
+    padding-right: @size;
+    padding-bottom: @size;
+    padding-left: @size;
+  });
+
+  .generate-padding-utilities(@padding-scale; @i + 1);
+}
+
+.generate-screen-padding-utilities(@padding-scale; @screen; @screen-width; @i: 1) when (@i <= length(@padding-scale)) {
+  @prefix: ~"@{screen}\:";
+  @spacer: extract(@padding-scale, @i);
+  @n: extract(@spacer, 1);
+  @size: extract(@spacer, 2);
+
+  @media (min-width: @screen-width) {
+    .define-selector(~"@{prefix}pt-@{n}", { padding-top: @size; });
+    .define-selector(~"@{prefix}pr-@{n}", { padding-right: @size; });
+    .define-selector(~"@{prefix}pb-@{n}", { padding-bottom: @size; });
+    .define-selector(~"@{prefix}pl-@{n}", { padding-left: @size; });
+    .define-selector(~"@{prefix}py-@{n}", {
+      padding-top: @size;
+      padding-bottom: @size;
+    });
+    .define-selector(~"@{prefix}px-@{n}", {
+      padding-right: @size;
+      padding-left: @size;
+    });
+    .define-selector(~"@{prefix}p-@{n}", {
+      padding-top: @size;
+      padding-right: @size;
+      padding-bottom: @size;
+      padding-left: @size;
+    });
+  }
+
+  .generate-screen-padding-utilities(@padding-scale; @screen; @screen-width; (@i + 1));
+}
+
+.generate-responsive-padding-utilities(@padding-scale; @i: 1) when (@i <= length(@screens)) {
+  @screen: extract(@screens, @i);
+  @name: extract(@screen, 1);
+  @screen-width: extract(@screen, 2);
+
+  .generate-screen-padding-utilities(@padding-scale; @name; @screen-width);
+  .generate-responsive-padding-utilities(@padding-scale; @i + 1);
+}
+
+.generate-margin-utilities(@margin-scale; @i: 1) when (@i <= length(@margin-scale)) {
+  @spacer: extract(@margin-scale, @i);
+
+  @n: extract(@spacer, 1);
+  @size: extract(@spacer, 2);
+
+  .define-selector(~"mt-@{n}", { margin-top: @size; });
+  .define-selector(~"mr-@{n}", { margin-right: @size; });
+  .define-selector(~"mb-@{n}", { margin-bottom: @size; });
+  .define-selector(~"ml-@{n}", { margin-left: @size; });
+  .define-selector(~"my-@{n}", {
+    margin-top: @size;
+    margin-bottom: @size;
+  });
+  .define-selector(~"mx-@{n}", {
+    margin-right: @size;
+    margin-left: @size;
+  });
+  .define-selector(~"m-@{n}", {
+    margin-top: @size;
+    margin-right: @size;
+    margin-bottom: @size;
+    margin-left: @size;
+  });
+
+  .generate-margin-utilities(@margin-scale; @i + 1);
+}
+
+.generate-screen-margin-utilities(@margin-scale; @screen; @screen-width; @i: 1) when (@i <= length(@margin-scale)) {
+  @prefix: ~"@{screen}\:";
+  @spacer: extract(@margin-scale, @i);
+  @n: extract(@spacer, 1);
+  @size: extract(@spacer, 2);
+
+  @media (min-width: @screen-width) {
+    .define-selector(~"@{prefix}mt-@{n}", { margin-top: @size; });
+    .define-selector(~"@{prefix}mr-@{n}", { margin-right: @size; });
+    .define-selector(~"@{prefix}mb-@{n}", { margin-bottom: @size; });
+    .define-selector(~"@{prefix}ml-@{n}", { margin-left: @size; });
+    .define-selector(~"@{prefix}my-@{n}", {
+      margin-top: @size;
+      margin-bottom: @size;
+    });
+    .define-selector(~"@{prefix}mx-@{n}", {
+      margin-right: @size;
+      margin-left: @size;
+    });
+    .define-selector(~"@{prefix}m-@{n}", {
+      margin-top: @size;
+      margin-right: @size;
+      margin-bottom: @size;
+      margin-left: @size;
+    });
+  }
+
+  .generate-screen-margin-utilities(@margin-scale; @screen; @screen-width; (@i + 1));
+}
+
+.generate-responsive-margin-utilities(@margin-scale; @i: 1) when (@i <= length(@screens)) {
+  @screen: extract(@screens, @i);
+  @name: extract(@screen, 1);
+  @screen-width: extract(@screen, 2);
+
+  .generate-screen-margin-utilities(@margin-scale; @name; @screen-width);
+
+  @media (min-width: @screen-width) {
+    @prefix: ~"@{name}\:";
+    .@{prefix}mx-auto { margin-left: auto; margin-right: auto; }
+  }
+
+  .generate-responsive-margin-utilities(@margin-scale; @i + 1);
+}
+
+.generate-pull-utilities(@pull-scale; @i: 1) when (@i <= length(@pull-scale)) {
+  @spacer: extract(@pull-scale, @i);
+
+  @n: extract(@spacer, 1);
+  @size: extract(@spacer, 2);
+
+  .define-selector(~"pull-t-@{n}", { margin-top: ~"-@{size}"; });
+  .define-selector(~"pull-r-@{n}", { margin-right: ~"-@{size}"; });
+  .define-selector(~"pull-b-@{n}", { margin-bottom: ~"-@{size}"; });
+  .define-selector(~"pull-l-@{n}", { margin-left: ~"-@{size}"; });
+  .define-selector(~"pull-y-@{n}", {
+    margin-top: ~"-@{size}";
+    margin-bottom: ~"-@{size}";
+  });
+  .define-selector(~"pull-x-@{n}", {
+    margin-right: ~"-@{size}";
+    margin-left: ~"-@{size}";
+  });
+  .define-selector(~"pull-@{n}", {
+    margin-top: ~"-@{size}";
+    margin-right: ~"-@{size}";
+    margin-bottom: ~"-@{size}";
+    margin-left: ~"-@{size}";
+  });
+
+  .generate-pull-utilities(@pull-scale; @i + 1);
+}
+
+.generate-screen-pull-utilities(@pull-scale; @screen; @screen-width; @i: 1) when (@i <= length(@pull-scale)) {
+  @prefix: ~"@{screen}\:";
+  @spacer: extract(@pull-scale, @i);
+  @n: extract(@spacer, 1);
+  @size: extract(@spacer, 2);
+
+  @media (min-width: @screen-width) {
+    .define-selector(~"@{prefix}pull-t-@{n}", { margin-top: ~"-@{size}"; });
+    .define-selector(~"@{prefix}pull-r-@{n}", { margin-right: ~"-@{size}"; });
+    .define-selector(~"@{prefix}pull-b-@{n}", { margin-bottom: ~"-@{size}"; });
+    .define-selector(~"@{prefix}pull-l-@{n}", { margin-left: ~"-@{size}"; });
+    .define-selector(~"@{prefix}pull-y-@{n}", {
+      margin-top: ~"-@{size}";
+      margin-bottom: ~"-@{size}";
+    });
+    .define-selector(~"@{prefix}pull-x-@{n}", {
+      margin-right: ~"-@{size}";
+      margin-left: ~"-@{size}";
+    });
+    .define-selector(~"@{prefix}pull-@{n}", {
+      margin-top: ~"-@{size}";
+      margin-right: ~"-@{size}";
+      margin-bottom: ~"-@{size}";
+      margin-left: ~"-@{size}";
+    });
+  }
+
+  .generate-screen-pull-utilities(@pull-scale; @screen; @screen-width; (@i + 1));
+}
+
+.generate-responsive-pull-utilities(@pull-scale; @i: 1) when (@i <= length(@screens)) {
+  @screen: extract(@screens, @i);
+  @name: extract(@screen, 1);
+  @screen-width: extract(@screen, 2);
+
+  .generate-screen-pull-utilities(@pull-scale; @name; @screen-width);
+  .generate-responsive-pull-utilities(@pull-scale; @i + 1);
+}
diff --git a/src/utilities/spacing.less b/src/utilities/spacing.less
index 7a9f147ad..0ce4ccee0 100644
--- a/src/utilities/spacing.less
+++ b/src/utilities/spacing.less
@@ -34,218 +34,19 @@
   '14' @spacer-14,
   '15' @spacer-15;
 
-.generate-padding-utilities(@i: 1) when (@i <= length(@spacer-map)) {
-  @spacer: extract(@spacer-map, @i);
+@spacing-scale: @spacer-map;
+@padding-scale: @spacing-scale;
+@margin-scale: @spacing-scale;
+@pull-scale: @spacing-scale;
 
-  @n: extract(@spacer, 1);
-  @size: extract(@spacer, 2);
-
-  .define-selector(~"pt-@{n}", { padding-top: @size; });
-  .define-selector(~"pr-@{n}", { padding-right: @size; });
-  .define-selector(~"pb-@{n}", { padding-bottom: @size; });
-  .define-selector(~"pl-@{n}", { padding-left: @size; });
-  .define-selector(~"py-@{n}", {
-    padding-top: @size;
-    padding-bottom: @size;
-  });
-  .define-selector(~"px-@{n}", {
-    padding-right: @size;
-    padding-left: @size;
-  });
-  .define-selector(~"p-@{n}", {
-    padding-top: @size;
-    padding-right: @size;
-    padding-bottom: @size;
-    padding-left: @size;
-  });
-
-  .generate-padding-utilities(@i + 1);
-}
-
-.generate-screen-padding-utilities(@screen; @screen-width; @i: 1) when (@i <= length(@spacer-map)) {
-  @prefix: ~"@{screen}\:";
-  @spacer: extract(@spacer-map, @i);
-  @n: extract(@spacer, 1);
-  @size: extract(@spacer, 2);
-
-  @media (min-width: @screen-width) {
-    .define-selector(~"@{prefix}pt-@{n}", { padding-top: @size; });
-    .define-selector(~"@{prefix}pr-@{n}", { padding-right: @size; });
-    .define-selector(~"@{prefix}pb-@{n}", { padding-bottom: @size; });
-    .define-selector(~"@{prefix}pl-@{n}", { padding-left: @size; });
-    .define-selector(~"@{prefix}py-@{n}", {
-      padding-top: @size;
-      padding-bottom: @size;
-    });
-    .define-selector(~"@{prefix}px-@{n}", {
-      padding-right: @size;
-      padding-left: @size;
-    });
-    .define-selector(~"@{prefix}p-@{n}", {
-      padding-top: @size;
-      padding-right: @size;
-      padding-bottom: @size;
-      padding-left: @size;
-    });
-  }
-
-  .generate-screen-padding-utilities(@screen; @screen-width; (@i + 1));
-}
-
-.generate-responsive-padding-utilities(@i: 1) when (@i <= length(@screens)) {
-  @screen: extract(@screens, @i);
-  @name: extract(@screen, 1);
-  @screen-width: extract(@screen, 2);
-
-  .generate-screen-padding-utilities(@name, @screen-width);
-  .generate-responsive-padding-utilities(@i + 1);
-}
-
-.generate-margin-utilities(@i: 1) when (@i <= length(@spacer-map)) {
-  @spacer: extract(@spacer-map, @i);
-
-  @n: extract(@spacer, 1);
-  @size: extract(@spacer, 2);
-
-  .define-selector(~"mt-@{n}", { margin-top: @size; });
-  .define-selector(~"mr-@{n}", { margin-right: @size; });
-  .define-selector(~"mb-@{n}", { margin-bottom: @size; });
-  .define-selector(~"ml-@{n}", { margin-left: @size; });
-  .define-selector(~"my-@{n}", {
-    margin-top: @size;
-    margin-bottom: @size;
-  });
-  .define-selector(~"mx-@{n}", {
-    margin-right: @size;
-    margin-left: @size;
-  });
-  .define-selector(~"m-@{n}", {
-    margin-top: @size;
-    margin-right: @size;
-    margin-bottom: @size;
-    margin-left: @size;
-  });
-
-  .generate-margin-utilities(@i + 1);
-}
-
-.generate-screen-margin-utilities(@screen; @screen-width; @i: 1) when (@i <= length(@spacer-map)) {
-  @prefix: ~"@{screen}\:";
-  @spacer: extract(@spacer-map, @i);
-  @n: extract(@spacer, 1);
-  @size: extract(@spacer, 2);
-
-  @media (min-width: @screen-width) {
-    .define-selector(~"@{prefix}mt-@{n}", { margin-top: @size; });
-    .define-selector(~"@{prefix}mr-@{n}", { margin-right: @size; });
-    .define-selector(~"@{prefix}mb-@{n}", { margin-bottom: @size; });
-    .define-selector(~"@{prefix}ml-@{n}", { margin-left: @size; });
-    .define-selector(~"@{prefix}my-@{n}", {
-      margin-top: @size;
-      margin-bottom: @size;
-    });
-    .define-selector(~"@{prefix}mx-@{n}", {
-      margin-right: @size;
-      margin-left: @size;
-    });
-    .define-selector(~"@{prefix}m-@{n}", {
-      margin-top: @size;
-      margin-right: @size;
-      margin-bottom: @size;
-      margin-left: @size;
-    });
-  }
-
-  .generate-screen-margin-utilities(@screen; @screen-width; (@i + 1));
-}
-
-.generate-responsive-margin-utilities(@i: 1) when (@i <= length(@screens)) {
-  @screen: extract(@screens, @i);
-  @name: extract(@screen, 1);
-  @screen-width: extract(@screen, 2);
-
-  .generate-screen-margin-utilities(@name, @screen-width);
-
-  @media (min-width: @screen-width) {
-    @prefix: ~"@{name}\:";
-    .@{prefix}mx-auto { margin-left: auto; margin-right: auto; }
-  }
-
-  .generate-responsive-margin-utilities(@i + 1);
-}
-
-.generate-pull-utilities(@i: 1) when (@i <= length(@spacer-map)) {
-  @spacer: extract(@spacer-map, @i);
-
-  @n: extract(@spacer, 1);
-  @size: extract(@spacer, 2);
-
-  .define-selector(~"pull-t-@{n}", { margin-top: ~"-@{size}"; });
-  .define-selector(~"pull-r-@{n}", { margin-right: ~"-@{size}"; });
-  .define-selector(~"pull-b-@{n}", { margin-bottom: ~"-@{size}"; });
-  .define-selector(~"pull-l-@{n}", { margin-left: ~"-@{size}"; });
-  .define-selector(~"pull-y-@{n}", {
-    margin-top: ~"-@{size}";
-    margin-bottom: ~"-@{size}";
-  });
-  .define-selector(~"pull-x-@{n}", {
-    margin-right: ~"-@{size}";
-    margin-left: ~"-@{size}";
-  });
-  .define-selector(~"pull-@{n}", {
-    margin-top: ~"-@{size}";
-    margin-right: ~"-@{size}";
-    margin-bottom: ~"-@{size}";
-    margin-left: ~"-@{size}";
-  });
-
-  .generate-pull-utilities(@i + 1);
-}
-
-.generate-screen-pull-utilities(@screen; @screen-width; @i: 1) when (@i <= length(@spacer-map)) {
-  @prefix: ~"@{screen}\:";
-  @spacer: extract(@spacer-map, @i);
-  @n: extract(@spacer, 1);
-  @size: extract(@spacer, 2);
-
-  @media (min-width: @screen-width) {
-    .define-selector(~"@{prefix}pull-t-@{n}", { margin-top: ~"-@{size}"; });
-    .define-selector(~"@{prefix}pull-r-@{n}", { margin-right: ~"-@{size}"; });
-    .define-selector(~"@{prefix}pull-b-@{n}", { margin-bottom: ~"-@{size}"; });
-    .define-selector(~"@{prefix}pull-l-@{n}", { margin-left: ~"-@{size}"; });
-    .define-selector(~"@{prefix}pull-y-@{n}", {
-      margin-top: ~"-@{size}";
-      margin-bottom: ~"-@{size}";
-    });
-    .define-selector(~"@{prefix}pull-x-@{n}", {
-      margin-right: ~"-@{size}";
-      margin-left: ~"-@{size}";
-    });
-    .define-selector(~"@{prefix}pull-@{n}", {
-      margin-top: ~"-@{size}";
-      margin-right: ~"-@{size}";
-      margin-bottom: ~"-@{size}";
-      margin-left: ~"-@{size}";
-    });
-  }
-
-  .generate-screen-pull-utilities(@screen; @screen-width; (@i + 1));
-}
-
-.generate-responsive-pull-utilities(@i: 1) when (@i <= length(@screens)) {
-  @screen: extract(@screens, @i);
-  @name: extract(@screen, 1);
-  @screen-width: extract(@screen, 2);
-
-  .generate-screen-pull-utilities(@name, @screen-width);
-  .generate-responsive-pull-utilities(@i + 1);
-}
-
-.generate-padding-utilities();
-.generate-margin-utilities();
-.generate-pull-utilities();
+.generate-padding-utilities(@padding-scale);
+.generate-margin-utilities(@margin-scale);
+.generate-pull-utilities(@pull-scale);
 .mx-auto { margin-left: auto; margin-right: auto; }
 
-.generate-responsive-padding-utilities();
-.generate-responsive-margin-utilities();
-.generate-responsive-pull-utilities();
+.generate-responsive-padding-utilities(@padding-scale);
+.generate-responsive-margin-utilities(@margin-scale);
+.generate-responsive-pull-utilities(@pull-scale);
+.responsive({
+    &mx-auto { .mx-auto; }
+});