Add _spacers.less to generate pad/mar utility classes

app/styles/_spacers.less

@@ -0,0 +1,51 @@
+// Spacing utility classes
+// creates:
+//  .pad-sm, .pad-md, .pad-lg, etc
+//  .mar-sm, .mar-md, .mar-lg, etc
+//  .pad-left-sm, .mar-left-sm, etc
+//
+@nil: none 0 e('!important');
+// @auto 0 auto; is built into the fn below
+@xs: xs 3px e('');
+@sm: sm 5px e('');
+@md: md 10px e('');
+@lg: lg 15px e('');
+@xl: xl 20px e('');
+@xxl: xxl 30px e('');
+
+@sizes: @nil, @xs, @sm, @md, @lg, @xl, @xxl;
+@sides: top, right, bottom, left;
+
+.spacer-side(@list, @size, @px, @mod, @i:1) when (@i <= length(@list)) {
+  @side: extract(@list, @i);
+  .pad-@{side}-@{size} {
+    padding-@{side}: @px @mod;
+  }
+  .mar-@{side}-@{size} {
+    margin-@{side}: @px @mod;
+  }
+  .spacer-side(@list, @size, @px, @mod, @i+1);
+}
+
+.spacers(@list, @i:1) when (@i <= length(@list)) {
+  @item: extract(@list, @i);
+  @key: extract(@item, 1);
+  @val: extract(@item, 2);
+  @mod: extract(@item, 3);
+  .pad-auto-@{key} {
+    padding: 0 auto;
+  }
+  .mar-auto-@{key} {
+    margin: 0 auto;
+  }
+  .pad-@{key} {
+    padding: @val @val * 1.5;
+  }
+  .mar-@{key} {
+    margin: @val @val * 1.5;
+  }
+  .spacer-side(@sides, @key, @val, @mod);
+  .spacers(@list, @i+1);
+}
+
+.spacers(@sizes);

app/styles/main.less

@@ -103,5 +103,6 @@
 @import "_tile.less";
 @import "_topology.less";
 @import "_typography.less";
+@import "_spacers.less";
 @import "_log.less";
 @import "_settings.less";