css - 如何在 Stylus 中生成占位符

Question

我希望生成可根据配置的比例而改变的占位符和变量，例如:

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

每个占位符将相应的生成变量应用于规则:

$small-margin-top
    margin-top $marginsmall

$large-margin-top
    margin-top $marginLarge

$small-padding-bottom
    margin-bottom $marginSmall

我现在已经静态定义了变量:

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

但是我得到一个错误:

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)

如何为我的 proportions 变量生成占位符，以便稍后可以扩展生成的占位符 (@extend $margin-large)？

---

编辑:here is the working solution

Answer 1

lookup bif 接受一个字符串，并且您正在传递一个标识(边距、填充等，不带引号)。您可以使用连接将它们转换为字符串。此外，您还错过了一个 $ 符号:

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)