If you read my previous article on Sass’s @extend directive or if you have pretty solid knowledge about the way Sass works, you may be aware that you cannot do this: %example { color: blue; font-weight: bold; font-size: 2em; } @media (max-width: 800px) { .generic-class { @extend %example; } } What’s happening here is we’re trying to extend a placeholder inside a media query from another scope (in