Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Trying to dynamically generate placeholders
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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.