Geek asks and answers

Using mixin nested in another selector / class

I am trying to make Mixin infer two different things based on context. For instance:

.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 it .seticonworks as expected, but .nonreceivable .seticondoes not seem to work. Is this a mistake, or am I doing something wrong or not intended for Less developers? How would you solve this?

+3
source share
1 answer

Does the class nonreceivableapply to the same element or parent element? if he is a parent, he must work. Otherwise, put &before.section

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

More articles:


All Articles