css - 如何加入变量名？

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 函数，这只是一个示例，我需要获取加入@color-name 的名称和类似“base”或“accent”的字符串。

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