如何加入变量名？

Question

我需要加入一些变量的名称，这里有一个例子：

文件名：color-vars.less

首先，一些包含基色和强调色的变量：

@red-base:#ff0000;
@red-accent:#FF1744;
@yellow-base:#FFCC00;
@yellow-accent:#FFEA00;

文件名：color-mixin.less

可以让我组合颜色的mixin

.add-color(@color-name){
    .@{color-name}-bg {
        background: ~"@{color-name}-base";
    }
    .@{color-name}-bg.accent {
        background: ~"@{color-name}-accent";
    }
}

文件名：main.less

将调用mixin的主文件：

@import "color-vars.less";
@import "color-mixin.less";

.add-color(red);
.add-color(yellow);

这是实际输出：

.red-bg {
    background: red-base;
}
.red-bg.accent {
    background: red-accent;
}
.yellow-bg {
    background: yellow-base;
}
.yellow-bg.accent {
    background: yellow-accent;
}

我期待的是：

.red-bg {
    background: #FF0000;
}
.red-bg.accent {
    background: #FF1744;
}
.yellow-bg {
    background: #FFCC00;
}
.yellow-bg.accent {
    background: #FFEA00;
}

请记住，我计划使用lighten和darken函数，这只是一个示例，我需要获取加上{{1}名称的变量的值{1}}以及类似＆＃34; base＆＃34;的字符串或者＆＃34;重音＆＃34;。

Answer 1

代码当前使用~"@{color-name}-accent"执行的所有操作都是将color-name变量的值与字符串连接起来并打印它而不带引号。代码不会使用连接名称来评估变量包含的实际值。

要打印由连接名称表示的变量的值，您应该将其括在另一个@{...}中，如下面的代码段所示：

.add-color(@color-name){
    .@{color-name}-bg {
        background: ~"@{@{color-name}-base}";
    }
    .@{color-name}-bg.accent {
        background: ~"@{@{color-name}-accent}";
    }
}