CODEWITHSUNDEEP
cssless
sbeliv01
sbeliv01

Reputation: 11830

LESS - Using a Guard on a Nested Mixin

I'm working on a set of buttons using LESS and I've run into a situation which I cannot seem to find a solution. Basically, I have a mixin that I'm applying to the .button class which has the normal state and a hover state declared within the mixin itself.

Now, the problem is that I want to add a condition so that I'm not forced to apply the &:hover declaration in the mixin so I've tried setting a default value to the @check variable and using the when (@check) in the :hover state but this produces an error.

I've dumbed this down a little bit from my original block but basically this represents what I want to do but can't seem to find the proper method in achieving.

._mixin (@color: red, @check: true) {
    background: @color;

    &:hover() when (@check) { // tried &:hover(@check) when (@check) as well
       background: darken(@color, 10%);
    }
}

.button {

    ._mixin(#333);

    &.disabled {
        ._mixin(#333, false);
    }    

}

How can I set up the mixin to exclude the :hover state on demand, for instance, when the .button.disabled is applied to an element?

Upvotes: 2

Views: 511

Answers (1)

zzzzBov
zzzzBov

Reputation: 179216

What you need to do is declare the mixin twice, once for all styles that should be applied, and once for all styles that need the guard:

//these styles are always applied when ._mixin is used
._mixin (@color: red, ...) {
    background: @color;
}
//these styles are applied only when the second parameter is true
._mixin (@color: red, true) {
    &:hover {
        background: darken(@color, 10%);
    }
}

.button {
    ._mixin(#333);

    &.disabled {
        ._mixin(#333, false);
    }    
}

Alternatively, you can create an inner mixin which has a guard on it:

._mixin (@color: red, @guard: true) {
    background: @color;
    //catchall for when the guard doesn't match
    .inner() {}
    //set your styles that you want to match in a guarded inner mixin
    .inner() when (@guard) {
      &:hover {
        background: darken(@color, 10%);
      }
    }
    //apply the inner mixin to the current mixin
    .inner;
}

Upvotes: 3

Related Questions