如何在Less混合宏中动态更新变量以简化调用语法？

你遇到的问题其实是Less变量作用域和条件守卫特性导致的——直接在条件分支里修改@type变量不会影响外部作用域的参数值，所以才会生成text-transform: upper;这种不符合预期的规则。下面给你两种可行的解决方案，既能支持upper/lower的简写调用，又能兼容原来的用法：

方案一：条件守卫分支直接赋值 #

这种方式最直观，针对每个简写参数单独写条件分支，直接在分支里设置正确的text-transform属性：

.text-transform(@type: none) {
    // 处理upper → uppercase，同时保留你的红色样式
    & when (@type = upper) {
        text-transform: uppercase;
        color: red;
    }
    // 处理lower → lowercase
    & when (@type = lower) {
        text-transform: lowercase;
    }
    // 处理默认值和原生合法值（比如none、uppercase、capitalize等）
    & when not (@type = upper) and not (@type = lower) {
        text-transform: @type;
    }
}

这样调用时：

• .text-transform(upper) → 生成text-transform: uppercase; color: red;
• .text-transform(lower) → 生成text-transform: lowercase;
• 原来的.text-transform(none)、.text-transform(uppercase)也能正常工作。

方案二：用映射表管理参数映射（更易扩展） #

如果后续可能需要更多简写（比如cap对应capitalize），用映射表的方式会更优雅，维护起来更方便：

// 先定义参数映射表，键是简写，值是原生text-transform值
@text-transform-map: {
    upper: uppercase,
    lower: lowercase,
    cap: capitalize // 后续新增简写直接加在这里
};

.text-transform(@type: none) {
    // 如果参数是映射表中的简写，使用对应的值
    & when (map-has-key(@text-transform-map, @type)) {
        text-transform: map-get(@text-transform-map, @type);
        // 给upper单独添加红色样式
        & when (@type = upper) {
            color: red;
        }
    }
    // 处理默认值和原生合法值
    & when not (map-has-key(@text-transform-map, @type)) {
        text-transform: @type;
    }
}

为什么你之前的方法不行？ #

• 你在条件分支里重新赋值@type，但Less的条件守卫分支是独立作用域，分支内的变量不会覆盖外部传入的@type参数，所以外部的text-transform: @type;还是会用最初传入的upper。
• 而@type: "@{type}case";会触发无限递归，因为你在变量定义中直接引用了自身，Less会不断尝试解析这个变量，导致编译报错。

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