CODEWITHSUNDEEP
cssnamespaceslessmixins
Nathan Piazza
Nathan Piazza

Reputation: 73

In LESS CSS, is it possible to use a namespaced variable in a call to another mixin?

In LESS CSS, is it possible to use a namespaced variable in a call to another mixin or as a default value in another mixin? Using the normal syntax, it appears not, but is there an escape sequence or other syntax I can use to achieve the effect I'm looking for?

I'm 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 utility of namespaces. It's like being able to place a variable in object scope but only being able to pass variables in the global scope as a parameter to a function. Basically this would appear to eliminate 90% of the utility of namespaces.

Upvotes: 7

Views: 4481

Answers (1)

ScottS
ScottS

Reputation: 72271

New Answer: Expand your Mixin with a Guard Expression Check

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

#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 (based on whether you set value or not):

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

OR

You can still use a "getter" mixin in your namespace as I originally noted, like so:

#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: Bundle the Variable into a Mixin Itself

If you bundle the variable into a mixin itself, then you can access it. So...

#namespace {
    .getNsColor() {@nsColor: #333;}
}

.testMixin1(@mixinColor) {
    background-color: @mixinColor;
}

Then either include it...

One: Globally

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

or Two: Locally

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

Both of which will output...

.selector {
  background-color: #333333;
}

Upvotes: 7

Related Questions