如何用Stylus Mixin插值批量生成CSS变量与Stylus变量配对声明

直接使用以下写法即可实现需求：

// Mixin 定义
VariablePair(varName)
  --{varName}: lookup(varName)

使用方式 #

1. 提前定义好对应的Stylus变量
2. 调用Mixin时传入字符串格式的变量公共名称即可

完整示例代码 #

// 第一步：预定义Stylus变量
MyVariable-1 = #3b82f6
MyVariable-2 = 14px
MyVariable-3 = 300ms

// 第二步：调用Mixin生成配对声明
:root
  VariablePair('MyVariable-1')
  VariablePair('MyVariable-2')
  VariablePair('MyVariable-3')

编译后输出的CSS #

:root {
  --MyVariable-1: #3b82f6;
  --MyVariable-2: 14px;
  --MyVariable-3: 300ms;
}

实现原理 #

• 左侧CSS变量名：传入的字符串参数可以直接通过--{varName}语法插值，生成符合规范的CSS自定义属性名
• 右侧取值：lookup()是Stylus内置工具函数，接收字符串格式的变量名作为入参，会自动查找当前作用域下对应名称的Stylus变量，返回其计算后的值，解决了字符串无法直接识别为变量的问题

注意事项 #

• 调用Mixin前必须已经完成对应Stylus变量的定义，否则lookup()会返回空值
• 如果需要兼容未定义的场景，可以给Mixin加容错判断：

  VariablePair(varName)
    value = lookup(varName)
    if value
      --{varName}: value
  

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