/*
	Recursive mixin calls ala bootstrap
*/
.span (@columns) {
  width: (12px * @columns) + (12px * (@columns - 1));
}
.spanX (@index) when (@index > 0) {
  .span@{index} { .span(@index); }
  .spanX(@index - 1);
}
.spanX (0) {}

.a {
	.spanX(12);
}
// Nested recursion
@gridColumns:             3;
@gridColumnWidth:         60px;
@gridGutterWidth:         20px;
#grid {
	.core (@gridColumnWidth, @gridGutterWidth) {
		.spanX (@index) when (@index > 0) {
			.span@{index} { .span(@index); }
			.spanX(@index - 1);
	    }
	    .spanX (0) {}
	    
	    .span (@columns) {
	    	width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
	    }
	    
	    .spanX (@gridColumns);
	    
	    .nested {
	    	padding: 1px;
	    	.spanX (@gridColumns);
	    	.deep {
	    		padding: 1px;
	    		.spanX (@gridColumns);
	    	}
	    }
	}
}
#grid > .core(@gridColumnWidth, @gridGutterWidth);