代码之家 › 专栏 › 技术社区 › user1429980

如何在Stylus中生成占位符

stylus code-generation css

user1429980 · 技术社区 · 10 年前

我希望生成占位符和变量,这些占位符和变量可以根据配置进行更改比例例如如下:

$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

1 回复 | 直到 10 年前

Panya 10 年前

这个 lookup bif接受一个字符串,您将传递一个ident(边距、填充等,不带引号)。您可以使用串联将它们转换为字符串。还有,你错过了 $ 标志:

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)

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前