Call mixin if variable is defined

Question

I try to use mixin guards with when condition, but during compiling I get the following error:

.mixin is undefined

.mixin (@color) when (isstring(@color)) {
  //some code
}

.mixin(#008000);

When I remove the when condition it works. Whats the problem here?

---

The problem is that we have variables inside our less-files which are defined in one compile-process. But during another compile-process this variables are not defined because we need a little bit dynamic here.

So I have to check if the variable is defined. When I try it over

$variables = [
   'testColor' => '#fff111',
];
$lessc->setVariables($variables);
$cachedCompile = $lessc->cachedCompile($publicPath .   $inputFile);

and

.mixin (@color:none) when (iscolor(@color)) {
   color: #fff;
}

.mixin(@testColor);

Everything works. But when I remove the testColor variable in the variable-array it crashes because it isn't defined.

Answer 1

Your problem could be because you are trying to pass a variable (@testColor) that does not exist as a parameter to the mixin. Try by adding the below line to the very top of your Less file.

@testColor: none;

Since Less does lazy loading of variables, if there is a value set during compilation that should overwrite the none. If no variable is set during compilation the above line would still mean that the variable is defined and has some default value.

---

There is no direct isnull or isnotnull type of function in Less. However, you can mimick the behavior by assigning a default value to the mixin.

In the below sample, we assign the default value as none which is not a color and hence when the iscolor(@color) condition is checked it would fail and the mixin would not produce any output.

I have also added a not condition below for you to see the difference.

.mixin (@color:none) when (iscolor(@color)) {
  //some code
  color: is defined;
}
.mixin (@color:none) when not (iscolor(@color)) {
  //some code
  color: is not defined;
}

#output1{
  .mixin();
}
#output2{
  .mixin(#ff0000);
}
#output3{
  .mixin(abcd);
}