Search code examples
csslessmixins

Variable Concatenation - using a mixin to dynamically create class name


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,


Solution

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