In LESS CSS, is it possible to use a variable with names when calling another mixin?

Question

In LESS CSS, is it possible to use a variable with names in a call to another mixin or as the default value in another mixin? Using the regular syntax, it doesn't look like that, but is there an escape sequence or other syntax that I can use to achieve the effect I'm looking for?

I am thinking of code like this:

#namespace { @nsColor: #333; } .testMixin1(@mixinColor) { background-color: @mixinColor; } .selector { .testMixin1(#namespace > @nsColor); } 

Or alternatively ...

 .testMixin2(@anotherMixinColor: #myNamespace > @myColor) { background-color: @anotherMixinColor; } 

If not, this severely limits the use of namespaces. This is similar to the ability to place a variable in an object area, but only the ability to pass variables in a global area as a function parameter. Basically this seems to eliminate 90% of the utility of namespaces.

Answer 1

New answer: Deploy your Mixin with Expression Expression validation

So, I understand that you want the namespace to be used as the default value, but without entering the global scope at all. I think you need to expand your mixin definition like this:

 #namespace { @nsColor: #333; } .testMixin1(@mixinColor: 'null') { .mixin (@a) when (iscolor(@a)) { background-color: @a; } .mixin (@a) when not (iscolor(@a)) { #namespace; background-color: @nsColor; } .mixin (@mixinColor); } 

Then call without or with a value:

 .testMixin1(); .testMixin1(red); 

Outputs (depending on whether a value is set or not):

 background-color: #333333; background-color: #ff0000; 

OR

You can still use the "getter" mixin in your namespace, as I already noted, for example:

 #namespace { .getNsColor(){@nsColor: #333;} <-- changed here } .testMixin1(@mixinColor: 'null') { .mixin (@a) when (iscolor(@a)) { background-color: @a; } .mixin (@a) when not (iscolor(@a)) { #namespace > .getNsColor(); <-- changed here background-color: @nsColor; } .mixin (@mixinColor); } 

Original answer: Bind the variable to yourself.

If you combine the variable into the mixer itself, you can access it. So that...

 #namespace { .getNsColor() {@nsColor: #333;} } .testMixin1(@mixinColor) { background-color: @mixinColor; } 

Then either turn it on ...

One: globally

 #namespace > .getNsColor; .selector { .testMixin1(@nsColor); } 

or two: Locally

 .selector { #namespace > .getNsColor; .testMixin1(@nsColor); } 

Both of them will be displayed ...

 .selector { background-color: #333333; }