How to Generate Placeholders in Stylus

问题

I'm looking to generate placeholders and variables that can change depending on configured proportions such as the following:

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

Where each placeholder applies the corresponding, generated variable to the rule:

$small-margin-top
    margin-top $marginsmall

$large-margin-top
    margin-top $marginLarge

$small-padding-bottom
    margin-bottom $marginSmall

I have statically defined the variables for now:

/* Margin */
$margin = 1rem
$marginsmall = $margin / $multiplier
$marginlarge = $margin * $multiplierLarge
$marginmini = $marginSmall / $multiplierLarge

But I get an error:

TypeError: expected "name" to be a string, but got ident:marginmini

properties = margin padding

proportions = mini small medium large

directions = top left bottom right

for property in properties
    for proportion in proportions
            for direction in directions
                ${property}-{direction}-{proportion}
                    {property}-{direction} lookup(property + proportion)

How can I generate placeholders for my proportions variable, such that the generated placeholders may be extended later (@extend $margin-large)?

EDIT: here is the working solution

回答1:

The lookup bif accepts a string, and you are passing an ident (margin, padding, etc. without quotes). You can convert them to string by using concatenation. Also, you miss a $ sign:

properties = margin padding

proportions = mini small medium large

directions = top left bottom right

for property in properties
    for proportion in proportions
        for direction in directions
            ${proportion}-{property}-{direction}
                {property}-{direction} lookup('$' + property + proportion)

来源：https://stackoverflow.com/questions/25375087/how-to-generate-placeholders-in-stylus

标签

css

code-generation

stylus