Css 如何连接变量名？ 我需要加入一些变量的名称，下面是一个示例：

文件名：color-vars.less

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

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

文件名：color-mixin.less

可以让我组合颜色的混音器

.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);

这是实际输出： 我所期待的是：

---

请记住，我计划使用

变亮

和

变暗

函数，这只是一个示例，我需要获取一个变量的值，该变量连接

@color name

的名称和一个类似“base”或“accent”的字符串。

代码当前使用

~“@{color name}-accent”执行的所有操作

将

颜色名称

变量的值与字符串连接起来，并在不带引号的情况下打印。代码永远不会计算具有连接名称的变量所包含的实际值

要打印由连接名称表示的变量值，应将其括在另一个

@{…}

中，如以下代码段所示：

。添加颜色（@color name）{
.@{color name}-bg{
背景：~“@{{color name}-base}”；
}
.@{color name}-bg.accent{
背景：~“@{{color name}-accent}”；
}
}

总是乐于帮助：）当我尝试使用lighte函数时，遇到了一个问题，这就是我的问题：背景：lighte（~“{{color name}-base}”，50%）；但是没有编译css这是错误：SyntaxError:error Evaluation function

Lightning

：Object[Object Object Object]没有“toHSL”方法，您有解决方案吗？别担心，我找到了解决方案，可能会有帮助too@RodrigoCalix-实际上这不是一个bug。求值的输出是一个字符串，而lighte函数需要一个颜色作为输入。看一看我之前写的一个类似问题。感谢信被认为是不必要的，不是必需的。它几乎总是会被评论者删除，因此我进行了编辑。同样，我也从标题中删去了预处理器的名称：）不过我喜欢你写问题的方式。这不需要想象：）好吧，没问题，你是知道的人。

.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;
}