如何在触控笔中生成占位符 [英] 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

• $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

但我得到一个错误： / p>

But I get an error:

TypeError：expectedname是一个字符串，但有ident：marginmini

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)

c $ c> proportion 变量，以便生成的占位符可以稍后扩展（ @extend $ margin-large ）？

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

编辑：这里是工作解决方案

here is the working solution

推荐答案

lookup bif接受一个字符串，并且你传递一个ident（margin，padding等等，没有引号）。您可以使用连接将它们转换为字符串。此外，您错过了 $ 符号：

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)

这篇关于如何在触控笔中生成占位符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！