John Ohara John Ohara - 5 months ago 11
CSS Question

LESS CSS Extend function not working as expected

I have a style set up using extend. The problem is, under certain circumstances, it isn't working and it doesn't seem logical.

I've simplified the CSS but the problem is still the same. Here's some nested classes:

#how-it-works {
.timeline {
& > .timeline-step {

& > h3:extend(.h3-text) {}
}
}
}


In the above instance LESS doesn't output the CSS.

However, if I remove the outer layer like this:

.timeline {
& > .timeline-step {

& > h3:extend(.h3-text) {}
}
}


I get the output I need:

.h3-text,
h3:not([class]),
.timeline > .timeline-step > h3,
.legal-info dt,
.call-to-action .rapr {
color: #424242;
font-size: 20px;
line-height: 28px;
}


It doesn't matter whether the outer style is a class or an ID.

Anyone throw any light on the situation?

Answer

This is a very weird kind of behavior and currently I don't have an explanation as to why it works this way but there is a workaround. It seems to work if we use the parent selector (&) at all levels before the actual nested selector (except the inner-most one).

Considering for how long the :extend() feature has existed and how common this scenario seems to be, it could possibly be an intended feature. I will add more explanation about the reason once I've managed to find it :)

.h3-text{
    color: #424242;
    font-size: 20px;
    line-height: 28px;
}    
#how-it-works {
    & .timeline {
        & > .timeline-step {
           & > h3:extend(.h3-text) {};
        }
    }
}

Another approach that also seems to work is to avoid the & (parent selector) at all levels. It shouldn't be a big problem for this particular scenario because the & is basically doing nothing.

.h3-text{
    color: #424242;
    font-size: 20px;
    line-height: 28px;
}    
#how-it-works {
    .timeline {
        > .timeline-step {
             > h3:extend(.h3-text) {};
        }
    }
}