Cross-Media Query @extend Directives in Sass

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 this case, the root). It just doesn’t work, and if you try it you’ll get the following error message:

You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.

Continue reading %Cross-Media Query @extend Directives in Sass%

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s