LESS将字符串和变量组合在一起，输出为变量

Question

我想组合一个String和一个Variable并将其输出为一个变量。

示例：

@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

  

在Less中，您可以使用另一个变量定义变量的名称。

文档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;
    }
}