I am trying to create a mixin that dynamically defines variables in LESS CSS, by actually assigning them a composite name.

The simplified use-case (not the real one):

.define(@var){
    @foo{var}: 0;
}

Then one would call the mixin as such:

.define('Bar'){
    @fooBar: 0;
}

Since this kind of string interpolation is possible while using selectors names, I was wondering if the same would be possible for variable names; so far, I have had no luck with various syntaxes I tried (other than the above, I tried escaping, quoting, using the ~ prefix and so on).

Edit

I just tried one more thing, and I feel I might be close; but I am experiencing an oddity of the LESS syntax. If I write this:

.define(@var){
    #namespace {
         @foo: @var;
    }
}

And then call it like so:

.define(0)

I can then use @foo in the usual namespaced fashion:

.test {
     #namespace;
     property: @foo; /* returns 0 */
}

However, the same doesn't apply in the case of a string-interpolated selector:

.define(@var, @ns){
    #@{ns} {
         @foo: @var;
    }
}

.define(0, namespace);

.test {
     #namespace;
     property: @foo;
}

The above code gives me the following error:

Name error: #namespace is undefined

However, the string interpolation was successful and valid. As a matter of fact, if I take away the .test part and modify the above to output a test property, I can see that the CSS is parsed correctly. I mean:

.define(@var, @ns){
    #@{ns} {
         @foo: @var;
         prop: @foo;
    }
}

.define(0, namespace);

Outputs the following CSS:

#namespace {
    prop: 0;
}
Edit
Report