LESS combine string and variable, output as variable

Question

I want to combine a String and a Variable and Output it as a Variable.

Example:

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

Output:

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

As you can see ~"@color-@{state}" outputs a String, but i need a Variable.
How i could do that?

You could guess by looking at `"...@{state}"` For the proper method though see https://stackoverflow.com/questions/44161822. — seven-phases-max, Feb 17 '18 at 19:05

score 0 · Accepted Answer · answered Feb 19 '18 at 11:09

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

Documentation 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 combine string and variable, output as variable

1 Answers1