conditional execution in less

Question

By using LESS, I am trying to execute a conditional inside a mixing

Here is my code

.my-mixing (@isInverse) {
    .navbar {
        when(@isInverse) {
            .navbar-inverse;
        }
    }
}

.my-mixing(true);

it does not work.
Any hints?

Answer 1

You can't use when in the way you are trying to, it always has to appear after in the mixin-declaration. And you have to provide a fallback mixin, if the variable does not match the guard.

.my-mixing (@isInverse) {
    .navbar {
       .navbar-inverse(@isInverse);         
    }
}

.navbar-inverse(@a) when(@a){
   /* do something if it matches */
}
.navbar-inverse(@a) when not(@a){
  /* do something else (or nothing at all) */
}

.my-mixing(true);

I added when not(@a) in the second mixin, so it won't get included per se. You could as well place it before the guarded mixin to prevent styles from being overridden.

Answer 2

Given the following html...

<div class="navbar">
    I am navbar!
</div>

this is a working solution:

.navbar-inverse(@isInverse){
    // do nothing or whatever
}
.navbar-inverse(@isInverse) when(@isInverse){
    // apply styles for inverse navbar
}

.my-mixin(@isInverse){
    .navbar{
        .navbar-inverse(@isInverse);
    }
}
.my-mixin(true);

But if you would have shown your html and specified your problem more precisely maybe there would be a more suiting solution.