Stylus中如何正确展开merge合并的哈希为CSS属性？

问题分析 #

你遇到的两个核心问题：

1. 直接使用{merge(...)}会将合并后的哈希转为字符串输出，而非展开为CSS属性——这是因为Stylus仅支持展开已赋值的哈希变量，merge()的临时返回值无法直接通过{}解析。
2. 自定义loop_merge()函数未生成内容——原因是函数定义在调用之后，Stylus自上而下解析时，调用位置无法识别未定义的函数。

解决方案 #

方案一：先赋值再展开（推荐）

将merge()的结果先赋值给一个变量，再通过{变量名}展开为CSS属性：

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

$my_colors={}
$red_colors={
    '--red-1': red,
    '--red-2': pink
}
$blue_colors={
    '--blue-1': blue,
    '--blue-2': cyan
}

// 合并哈希并赋值给变量
$merged_colors = merge($my_colors, $red_colors, $blue_colors )

.test{
    {foo}
    // 展开已赋值的哈希变量
    {$merged_colors}
}

编译后得到目标CSS：

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

方案二：修复自定义函数

将函数定义移到调用位置之前，确保Stylus能解析到函数，函数内的循环属性会自动注入到调用它的CSS规则中：

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

$my_colors={}
$red_colors={
    '--red-1': red,
    '--red-2': pink
}
$blue_colors={
    '--blue-1': blue,
    '--blue-2': cyan
}

// 函数定义放在调用之前
loop_merge()
    $merge_colors = merge($my_colors, $red_colors, $blue_colors )
    for key, value in $merge_colors
        {key}: value

.test{
    {foo}
    loop_merge()
}

该代码同样能编译出你期望的CSS结果。

内容的提问来源于stack exchange，提问作者ztvmark