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,

score 2 · Accepted Answer · answered Mar 18 '14 at 21:14

2

@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();

answered Mar 18 '14 at 21:14

seven-phases-max

11,765
1
45
57

Thanks, @seven-phases-max, I thought I had tried that, but just trying again it worked ( must have had something else amiss) Thanks for taking the time. – Rob Sedgwick Mar 18 '14 at 21:17

score 1 · Answer 2 · answered Mar 18 '14 at 21:13

1

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 !

answered Mar 18 '14 at 21:13

Rob Sedgwick

5,216
4
20
36

Yes, `e(...)` is simply an alias function to `~'...'`. (Though the documentation says "CSS escaping, *replaced* with `~"value"` syntax." But of course you can use either of two - it's just a matter of personal preferences). – seven-phases-max Mar 18 '14 at 21:20

Variable Concatenation - using a mixin to dynamically create class name

2 Answers2