LESS 组合字符串和变量，输出为变量

Question

我想组合一个字符串和一个变量并将其输出为一个变量。

示例：

@color-primary: #ff0000;

/* mixin call */
.create-button-color(primary);

/* mixin */
.create-button-color(@state) {

    .button-@{state} {
        @state-item: ~"@color-@{state}";

        background-color: @state-item;
        border-color: @state-item;
    }
}

输出：

.button-primary {
    background-color: @color-primary;
    border-color: @color-primary;
}

如您所见，~"@color-@{state}" 输出一个字符串，但我需要一个变量。
我该怎么做？

Answer 1

In Less, you can define a variable's name using another variable.

文档 reference.

@color-primary: #ff0000;

/* mixin call */
.create-button-color(primary);

/* mixin */
.create-button-color(@state) {

    .button-@{state} {
        // Glue two parts of a variable: `color-` + `state`
        @state-item: "color-@{state}";
        // @state-item contains a string `color-primary`


        // Defile variable from string via @@
        background-color: @@state-item;
        border-color: @@state-item;
    }
}

LESS 组合字符串和变量，输出为变量

LESS combine string and variable, output as variable

string

variables

less