Stylus能否在变量内插值另一变量？mixin选择器插值报错如何解决

错误原因 #

Stylus 不支持 {{area}-list} 这类嵌套大括号的插值写法，也无法直接将拼接的变量名字符串自动识别为已定义的变量取值，所以才会报语法错误。

修正方案 #

你需要先在 mixin 内完成变量名的拼接，再通过 lookup() 方法获取对应变量的实际值，再执行插值操作，修改后的完整代码如下：

// 不同区域的列表选择器常量
content-list = '.content-list-1,.content-list-2'
sidebar-list = '.sidebar-list-1,.sidebar-list-2'

// 项目符号位置参数，命名和后续mixin拼接规则匹配
content-bullet-margin-top   : 0.4em
sidebar-bullet-margin-right : 0.1em

// 修正后的插值mixin
position(object, area)
  // 拼接选择器变量名，用lookup获取对应的选择器字符串
  listSelector = lookup(area + '-list')
  {listSelector}
    position : relative
    // 拼接属性变量名，用lookup获取对应数值
    top      : lookup(area + '-' + object + '-margin-top')
    right    : lookup(area + '-' + object + '-margin-right')

.bullet
  position(bullet, content)
  position(bullet, sidebar)

补充说明 #

• lookup() 是 Stylus 内置方法，可以传入变量名字符串，返回对应变量的实际值
• 选择器插值仅支持传入完整的变量，不支持在插值符{}内做嵌套拼接操作
• 你原代码中的属性变量命名是content-list-margin-top，和mixin内拼接的{area}-{object}-margin-top规则不匹配，要么修改变量名，要么调整拼接逻辑为area + '-list-margin-top'保证能正确取到值
• 上述代码编译后会输出符合预期的CSS结构：

.bullet .content-list-1, .bullet .content-list-2 {
  position: relative;
  top: 0.4em;
}
.bullet .sidebar-list-1, .bullet .sidebar-list-2 {
  position: relative;
  right: 0.1em;
}

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