CODEWITHSUNDEEP
cssless
Apocaliptyn Bane
Apocaliptyn Bane

Reputation: 3

LESS selector with sub-class parent

How can I affect child of specified parent sub-class selector? I making my class names in camel case, so I build my LESS file like this:

.popup {
    &Content {
        &Title {
            opacity: 0;
        }
    }
    &.active {
        &Content {
            &Title {
                opacity: 1;
            }
        }
    }
}

But it does not exactly what I need. It compiles to

.popupContentTitle {
    opacity: 0;
}
.popup.activeContentTitle
    opacity: 1;
}

Is there way to compile it properly: 

.popupContentTitle {
    opacity: 0;
}
.popup.active .popupContentTitle
    opacity: 1;
}

Upvotes: 0

Views: 280

Answers (2)

seven-phases-max
seven-phases-max

Reputation: 11820

See parent selectors order. E.g.:

.popup {
    &Content {
        &Title {
            opacity: 0;
            .popup.active & { 
                opacity: 1;
            }
        }
    }
}

And please don't overnest - there's no point in splitting .popupContentTitle into three separate blocks if it's actually the one with the only set of properties. I.e. it should really be just:

.popupContentTitle {
    opacity: 0;
    .popup.active & { 
        opacity: 1;
    }
}

And finally the often question: do you really have any .active .popupContentTitle element which is NOT a .popup.active .popupContentTitle? I.e. the first .popup there is most likely redundand.

Upvotes: 0

Curtis
Curtis

Reputation: 103348

This can be done by appending the ampersand after the nested selector:

.popup {
    &Content {
        &Title {
            opacity: 0;

            .popup.active & {
               opacity:1;  
            }
        }
    }
}

Upvotes: 1

Related Questions