Stylus css 如何通过合并显示连接的哈希值？

Question

使用以下手写笔CSS代码

foo = { '--width': 10px, height: 20px }

$my_colors={}

$red_colors={
    '--red-1': red,
    '--red-2': pink
}

$blue_colors={
    '--blue-1': blue,
    '--blue-2': cyan
}

.test{
    {foo}
    {merge($my_colors, $red_colors, $blue_colors )}
    loop_merge()
}

loop_merge()
    $merge_colors = merge($my_colors, $red_colors, $blue_colors )
    for key, value in $merge_colors
        {key}: value

我得到以下CSS

.test {
  --width: 10px;
  height: 20px;
{"--red-1":"(#f00)","--red-2":"(#ffc0cb)","--blue-1":"(#00f)","--blue-2":"(#0ff)"}
}

它应该按变量 foo 中的顺序显示，但它出现在哈希值中

我什至用 for 循环创建了一个函数，但它没有向我显示任何内容。

这是您应该获得的代码

.test {
  --width: 10px;
  height: 20px;
  --red-1: #f00;
  --red-2: #ffc0cb;
  --blue-1: #00f;
  --blue-2: #0ff;
}

Answer 1

只需在

for

中以

.test

作为对象运行

merge(foo, $my_colors, $red_colors, $blue_colors)

循环即可。

foo = { '--width': 10px, height: 20px }

$my_colors={}

$red_colors={
    '--red-1': red,
    '--red-2': pink
}

$blue_colors={
    '--blue-1': blue,
    '--blue-2': cyan
}

.test{
 for key,value in merge(foo, $my_colors, $red_colors, $blue_colors)
 {{key}: value}
}

输出：