CODEWITHSUNDEEP
csslessless-mixins
Birgit Zimmermann
Birgit Zimmermann

Reputation: 73

Using a mixin nested inside another selector/class

I'm trying to make a Mixin output two different things based on context. Like so:

.seticon(@r,@g,@b) {
    b {
        background-color: rgb(@r,@g,@b);
    }
    &.act b {
        .box-shadow(0 0 5px 1px rgba(@r,@g,@b,0.45));
    }
    &.act.hover b {
        background: #000;
        .box-shadow(inset 0 0 0 3px rgb(@r,@g,@b) !important;
    }
}

.nonreceivable {
    .seticon(@r,@g,@b) {
        b {
            background: #000 !important;
            .box-shadow(inset 0 0 0 2px rgb(@r,@g,@b));
        }
    }
}

Now .seticon works as expected, but .nonreceivable .seticon doesn't seem to work. Is this a bug, or am I doing something wrong or isn't this intended by the Less developers? How would you instead solve this?

Upvotes: 3

Views: 1948

Answers (1)

Aakash Goel
Aakash Goel

Reputation: 1179

Is nonreceivable class applied to the same element or parent element? if it's parent, it should work. Otherwise, put an & in front of .section 

.nonreceivable {
 &.seticon(@r,@g,@b) {
    b {
        background: #000 !important;
        .box-shadow(inset 0 0 0 2px rgb(@r,@g,@b));
    }
}
}

Upvotes: 0

Related Questions