Edit Question - KnowledgeHub

Title Body

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; }

Tags (comma-separated) Cancel