Using a variable in a selector in LESS

Question

I have a variable @index and I want to output a selector so that when @index is 3, the selector is [data-sth="3"].

Longer example:

@index: 3;
/* selector here */ {
    color: red;
}

Desired output:

[data-sth="3"] {
    color: red;
}

I've tried a few things, but haven't managed to get anything that works, yet.

Thanks.

Answer 1

See Variable Interpolation. I.e.:

[data-sth="@{index}"] {
    color: red;
}

---

Original answer (Less versions before 1.40):

The following code should work:

(~'[data-sth="@{index}"]') { color: red; }

The ~ removes the quotation marks.