如何在 Stylus 中生成占位符答案

【问题标题】：How to Generate Placeholders in Stylus如何在 Stylus 中生成占位符
【发布时间】：2014-08-19 03:00:48
【问题描述】：

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

$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: 预期 "name" 是一个字符串，但得到了 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

【问题讨论】：

标签： css code-generation stylus

【解决方案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)

【讨论】：

Stylus 不会编译 ${proportion}; PHPStorm 说这是一个“意外元素 - 坏字符”。如果我用\ 转义它，如果我定义$marginmini = 0.4rem 和@extend $margin-mini-top... 想法，仍然不会生成占位符（无法扩展）？
这是完全有效的语法。我认为 PHPStorm 对占位符选择器一无所知，因为它们相对较新，而且 PHPStorm 没有更新对 Stylus 的支持。根据您的问题，您应该写@extend $mini-margin-top，或在循环中更改变量顺序。您可以在 learnboost.github.io/stylus/try.html 或 Codepen (codepen.io/anon/pen/FCGew) 上在线测试此代码。
确实，我必须在观察者配置中“触发观察者而不考虑语法错误”。另外，如何设置变量？我在生成的占位符之前尝试了${proportion}{property}{direction} = (i * $multiplier * $em)，但没有运气：codepen.io/srsgores/pen/FJqhg
> 另外，设置变量怎么样？为此，我们有define bif。见learnboost.github.io/stylus/docs/bifs.html#definename-expr
似乎它应该可以工作，但它不是为我生成单位：codepen.io/srsgores/pen/xyGlu - define("" + proportion + property + direction, unit(i / 3, "em"))... 想法？