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
![Cross-Media Query @extend Directives in Sass — SitePoint](https://cdn-ak-scissors.b.st-hatena.com/image/square/e3fa475ce943a48db21acc256784b5c7fc17ab77/height=288;version=1;width=512/https%3A%2F%2Fwww.sitepoint.com%2Fwp-content%2Fthemes%2Fsitepoint%2Fassets%2Fimages%2Ficon.html-css.png)