Stylus能否在属性值而非属性名中使用插值？

解决方案 #

你遇到的问题是Stylus的属性值内不支持直接用{}插值生成动态变量名，可以用Stylus内置的lookup()函数实现需求，该函数可以接收字符串格式的变量名，返回对应变量的取值。

正确实现代码

首先定义预设的颜色变量：

color-TODO = red
color-TODO-background = blue
color-TODO-shadow = green

改写后的Mixin如下：

tag(tagName)
  .tag-{tagName}
    color: lookup('color-' + tagName)
    background: lookup('color-' + tagName + '-background')
    box-shadow: 0 0 4px lookup('color-' + tagName + '-shadow')

// 调用Mixin生成对应样式
tag(TODO)

编译后输出的CSS就是你需要的效果：

.tag-TODO {
  color: red;
  background: blue;
  box-shadow: 0 0 4px green;
}

可选优化

如果要避免变量未定义导致的无效属性，可以给lookup()传第二个参数作为默认值，也可以加前置判断：

tag(tagName)
  // 先判断基础变量是否存在
  if lookup('color-' + tagName)
    .tag-{tagName}
      color: lookup('color-' + tagName)
      // 第二个参数为默认值，未找到对应变量时生效
      background: lookup('color-' + tagName + '-background', #ffffff)
      box-shadow: 0 0 4px lookup('color-' + tagName + '-shadow', rgba(0,0,0,0.1))

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