Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 628
Nathan Piazza Avatar asked Oct 28 '12 05:10

Nathan Piazza


People also ask

Can I use CSS variables in LESS?

As we know, less function can't work with css variables.

How do you represent a variable in LESS?

Defining a variable: Variables in Less are represented with an at (@) sign. We can assign a value using a colon (:).

What is the difference between LESS and CSS?

LESS and CSS syntax The second difference between LESS and CSS lies in the syntax. However, the LESS syntax is little different from the CSS one, as the stylesheet language is a CSS preprocessor. This means that any CSS code is a valid LESS code (but additional LESS elements won't work in a plain CSS).


1 Answers

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;
}
like image 60
ScottS Avatar answered Sep 24 '22 09:09

ScottS