css - How to Generate Placeholders in Stylus -


i'm looking generate placeholders , variables can change depending on configured proportions such following:

  • $small-margin-top
  • $large-margin-top
  • $small-padding-bottom

where each placeholder applies corresponding, generated variable rule:

$small-margin-top     margin-top $marginsmall  $large-margin-top     margin-top $marginlarge  $small-padding-bottom     margin-bottom $marginsmall 

i have statically defined variables now:

/* margin */ $margin = 1rem $marginsmall = $margin / $multiplier $marginlarge = $margin * $multiplierlarge $marginmini = $marginsmall / $multiplierlarge 

but error:

typeerror: expected "name" string, got ident:marginmini

properties = margin padding  proportions = mini small medium large  directions = top left bottom right  property in properties     proportion in proportions             direction in directions                 ${property}-{direction}-{proportion}                     {property}-{direction} lookup(property + proportion) 

how can generate placeholders proportions variable, such generated placeholders may extended later (@extend $margin-large)?


edit: here working solution

the lookup bif accepts string, , passing ident (margin, padding, etc. without quotes). can convert them string using concatenation. also, miss $ sign:

properties = margin padding  proportions = mini small medium large  directions = top left bottom right  property in properties     proportion in proportions         direction in directions             ${proportion}-{property}-{direction}                 {property}-{direction} lookup('$' + property + proportion) 

Comments

Popular posts from this blog

java - How to specify maven bin in eclipse maven plugin? -

single sign on - Logging into Plone site with credentials passed through HTTP -

php - Why does AJAX not process login form? -