Stylus中哈希键绑定多个值无法编译的问题咨询

你之前写法报错的核心原因有两个：

1. 逗号分隔的多值列表没有用括号包裹，导致Stylus误把列表内部的逗号识别为哈希键值对的分隔符，将后面的列表元素解析为新的哈希键，触发语法错误
2. 部分尝试的写法在列表括号外额外加了逗号，同样会导致解析异常

正确实现方式 #

场景1：需要生成逗号分隔的多值列表（最常用，例如font-family的字体列表） #

用括号包裹整个列表，列表内部用逗号分隔元素，括号外不要加多余逗号，哈希键值对之间用换行分隔即可：

main-content-font = {
  family: ("Noto Sans", sans-serif)
  size: 1em
}

调用示例：

body
  font-family: main-content-font.family
  font-size: main-content-font.size

编译后输出的CSS：

body {
  font-family: "Noto Sans", sans-serif;
  font-size: 1em;
}

场景2：需要生成空格分隔的多值列表（例如padding、margin多值、transform多属性） #

直接用空格分隔多个值即可，无歧义的情况下可以不加括号，也可以用括号包裹提升可读性：

box-config = {
  padding: 10px 20px 15px 5px
  margin: (0 auto 20px)
}

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