LESS中向Mixin传递变量生成CSS类的问题求助

刚接触LESS和Mixin，尝试编写Mixin动态生成带特定变量的CSS类，但代码无法正常工作，尤其是background-color: var(--var-@{color}-bg-subtle);开始失效。

现有LESS代码 #

@colors: primary, secondary, succes, info, warning, danger;

.create-inbox(@index) when (@index > 0) {
    @color: extract(@colors, @index);

    .inbox-@{color}-lighten {
        --var-inbox-color: var(--var-@{color});
        background-color: var(--var-@{color}-bg-subtle); // 从此处开始失效

        &[href] {
            color: var(--var-@{color});
            text-decoration: none;
            background-color: var(--var-@{color}-bg-subtle);

            &:is(:hover, :focus) {
                color: var(--var-@{color});
                text-decoration: none;
                background-color: var(--var-@{color}-bg-subtle)
            }
        }
    }

    .create-inbox(@index - 1);
}

.create-inbox(length(@colors));

期望编译结果 #

.inbox-primary-lighten {
    --var-inbox-color: var(--var-primary);
    background-color: var(--var-primary-bg-subtle)
}

.inbox-primary-lighten[href] {
    color: var(--var-primary);
    text-decoration: none;
    background-color: var(--var-primary-bg-subtle)
}

.inbox-primary-lighten[href]:is(:hover, :focus) {
    color: var(--var-primary);
    text-decoration: none;
    background-color: var(--var-primary-bg-subtle)
}

• CSS变量插值语法问题：LESS中直接在var()内嵌套@{color}插值时，部分版本解析器无法正确识别拼接后的变量名。解决方法是先将完整的CSS变量名拼接成LESS变量，再传入var()中。
• 拼写错误：@colors列表里的succes是拼写错误，应改为success，否则会生成错误的类名.inbox-succes-lighten。
• 递归生成顺序（可选）：原递归从列表最后一个元素开始生成类（先danger，后warning…最后primary），如果需要和@colors列表顺序一致（先primary，后secondary…），可调整递归逻辑从索引1开始递增到列表长度。

修改后的LESS代码 #

@colors: primary, secondary, success, info, warning, danger;

// 按列表顺序生成的版本
.create-inbox(@index) when (@index <= length(@colors)) {
    @color: extract(@colors, @index);
    // 先拼接完整的CSS变量名
    @cssVar: ~"--var-@{color}";
    @cssVarBg: ~"--var-@{color}-bg-subtle";

    .inbox-@{color}-lighten {
        --var-inbox-color: var(@cssVar);
        background-color: var(@cssVarBg);

        &[href] {
            color: var(@cssVar);
            text-decoration: none;
            background-color: var(@cssVarBg);

            &:is(:hover, :focus) {
                color: var(@cssVar);
                text-decoration: none;
                background-color: var(@cssVarBg);
            }
        }
    }

    .create-inbox(@index + 1);
}

.create-inbox(1);

编译后的CSS（以primary为例） #

.inbox-primary-lighten {
    --var-inbox-color: var(--var-primary);
    background-color: var(--var-primary-bg-subtle);
}
.inbox-primary-lighten[href] {
    color: var(--var-primary);
    text-decoration: none;
    background-color: var(--var-primary-bg-subtle);
}
.inbox-primary-lighten[href]:is(:hover, :focus) {
    color: var(--var-primary);
    text-decoration: none;
    background-color: var(--var-primary-bg-subtle);
}

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