Less CSS spacing classes generator

space.less

// Live demo: paste this gist's code on http://less2css.org/

@start: left;
@end: right;

@base-space-0: 0;
@base-space-1: 1rem;
@base-space-2: 2rem;
@base-space-3: 3rem;

@space-units-base: false;
@space-units-small: 0, 1;

.space-rulesets(@space-property) when (@space-property = margin) {               
    .m@{breakpoint}-a-@{space-unit} { margin:          @@space-value !important; }
    .m@{breakpoint}-v-@{space-unit} { margin-top:      @@space-value !important; margin-bottom:   @@space-value !important; }
    .m@{breakpoint}-h-@{space-unit} { margin-@{end}:   @@space-value !important; margin-@{start}: @@space-value !important; }
    .m@{breakpoint}-t-@{space-unit} { margin-top:      @@space-value !important; }
    .m@{breakpoint}-e-@{space-unit} { margin-@{end}:   @@space-value !important; }
    .m@{breakpoint}-b-@{space-unit} { margin-bottom:   @@space-value !important; }
    .m@{breakpoint}-s-@{space-unit} { margin-@{start}: @@space-value !important; }
}

.space-rulesets(@space-property) when (@space-property = margin-negative) and (@space-unit > 0) {
    .m@{breakpoint}-an-@{space-unit} { margin:          -@@space-value !important; }
    .m@{breakpoint}-vn-@{space-unit} { margin-top:      -@@space-value !important; margin-bottom:   -@@space-value !important; }
    .m@{breakpoint}-hn-@{space-unit} { margin-@{end}:   -@@space-value !important; margin-@{start}: -@@space-value !important; }
    .m@{breakpoint}-tn-@{space-unit} { margin-top:      -@@space-value !important; }
    .m@{breakpoint}-en-@{space-unit} { margin-@{end}:   -@@space-value !important; }
    .m@{breakpoint}-bn-@{space-unit} { margin-bottom:   -@@space-value !important; }
    .m@{breakpoint}-sn-@{space-unit} { margin-@{start}: -@@space-value !important; } 
}

.space-rulesets(@space-property) when (@space-property = padding) {
    .p@{breakpoint}-a-@{space-unit} { padding:          @@space-value !important; }
    .p@{breakpoint}-v-@{space-unit} { padding-top:      @@space-value !important; padding-bottom:   @@space-value !important; }
    .p@{breakpoint}-h-@{space-unit} { padding-@{end}:   @@space-value !important; padding-@{start}: @@space-value !important; }
    .p@{breakpoint}-t-@{space-unit} { padding-top:      @@space-value !important; }
    .p@{breakpoint}-e-@{space-unit} { padding-@{end}:   @@space-value !important; }
    .p@{breakpoint}-b-@{space-unit} { padding-bottom:   @@space-value !important; }
    .p@{breakpoint}-s-@{space-unit} { padding-@{start}: @@space-value !important; }
} 

.render-space-classes(@space-property; @space-units; @breakpoint-name: ~"") when not (@space-units = false) {
  
  	// Normalize breakpoint name
  
  	.normalize-breakpoint(@breakpoint-name) when not ("@{breakpoint-name}" = "") {
    	@breakpoint: ~"-@{breakpoint-name}";
    }
 	.normalize-breakpoint(@breakpoint-name) when (default()) {
    	@breakpoint: @breakpoint-name;
    } 
  
  	.normalize-breakpoint(@breakpoint-name);
  
  	// Loop through the available spacing units
  
	.loop-space-classes(@i: length(@space-units)) when (@i > 0) {

        .loop-space-classes(@i - 1);

        @space-unit: extract(@space-units, @i);
        @space-value: "base-space-@{space-unit}";
      
      	.space-rulesets(@space-property)
    }
  
  	.loop-space-classes();
}

// Avoid leaking local variables to global namespace
// https://github.com/less/less-docs/issues/21
& {
    .render-space-classes(margin; @space-units-base;);
    .render-space-classes(margin-negative; @space-units-small;small);
    .render-space-classes(padding; @space-units-small; small);
}