Variable Concatenation - using a mixin to dynamically create class name

Question

H I, Working with Less and here is what I am hoping :

.createClass() {

    @varone:one;
    @vartwo:two;
    @classname: @{varone}_@{vartwo};

    .testClass_@{classname} {
       padding:.5em;
    }

}
.createClass();

Things I have tried from a few searches :

@classname: '@{varone}_@{vartwo}';

But this renders as:

    .testClass_'one_two' {
       padding:.5em;
    }

And I read about the tilder ~ ( but might be just for the phpless I found off a search ? )

@classname: ~'@{varone}_@{vartwo}';

didn't run.

---

I am running on node , compiling via the grunt less contrib

---

How do I render a 'unquoted string' in this way / is it possible ?

Many Thanks,

Answer 1

@classname: ~'@{varone}_@{vartwo}'; (or same with double quotes) is the correct syntax and works in all conformant Less compilers. I.e.:

.createClass() {
    @varone: one;
    @vartwo: two;
    @classname: ~'@{varone}_@{vartwo}';

    .testClass_@{classname} {
        padding: .5em;
    }
}

.createClass();

Answer 2

Ahh I found it.

http://lesscss.org/functions/#string-functions

Can use:

@classname: e(@{varone}_@{vartwo});

---

The e(str) filter does it

---

Bit more RTFM was needed from me !