Trying to dynamically generate placeholders

helpers.styl

use("camelize.js")

directions = top left bottom right

properties = margin padding

proportions = mini small normal medium large

positions = fixed absolute static relative

displays = block inline-block inline table

generatePlaceholder(property, values)
	for value in values
		${value}
			{property} value

rules = {
	display: block inline-block inline table
	position: fixed absolute static relative
	text-align: center left right
	vertical-align: top middle bottom
}

camelize(string)
	to-upper-case(substr(string, 0, 1)) + substr(string, 1)

// Generate basic proportion placeholders: ex. small-padding, medium-padding, etc.
for property in properties
	for proportion, i in proportions
		define("$" + property + camelize(proportion), unit(i / 3, "em")) // variables are known under $marginSmall, $paddingSmall, and so forth
		${proportion}-{property} // $small-margin
			{property} lookup("$" + property + camelize(proportion)) // margin $marginsmall
		for direction in directions
			${proportion}-{property}-{direction} // $small-margin-top
				{property}-{direction} lookup("$" + proportion + camelize(property)) // margin-top $marginlargetop

generatePlaceholder(position, rules.positions)
generatePlaceholder(display, rules.displays)
generatePlaceholder(text-align, rules.text-align)
generatePlaceholder(vertical-align, rules.vartical-align)