LESS Extend in Responsive Projects

tl;dr: you can't extend a selector with a class that has been defined in a different @media scope from the one you are currently in.

In case you're wondering why your &:extend(.my-super-class) statements seem to work only when they feel like it: it might be because you're unwittingly leaving their @media scope.

Example: extending a class that has been defined outside any media query will not work if you're trying it in a LESS file that is referenced inside a media query for large screens.

There's documentation here: Language Features | EXTEND | Less.js

Hopefully this saves us a few head aches!