Skip to content

Instantly share code, notes, and snippets.

@kaelig
Forked from blackfalcon/01_SassMeister.sass
Created November 21, 2012 22:41
Show Gist options
  • Save kaelig/4128326 to your computer and use it in GitHub Desktop.
Save kaelig/4128326 to your computer and use it in GitHub Desktop.
Extending placeholder selectors within media queries

Extending placeholder selectors within @media queries

By blackfalcon

Recent updates to Sass 3.2.3 has me thinking. And thanks to @micahgodbolt and @ScottKellum, I think we got to the bottom of this. Special thanks to Sass Meister for providing the test bed.

The following example illustrates how a placeholder selector can be extended within a @media query, functionality that previously threw an error in Sass. In the previous versions of Sass, the extended rule needed to be in direct context with the @media query. The functionality that this example illustrates is that if there is a common @media query between the new rule and the extended placeholder, this relationship will inherit.

%myclass {
color: blue;
@media (min-width: 600px) {
background: red;
}
@media (min-width: 800px) {
font-size: 28px;
}
}
.class1 {
@media (min-width: 600px) {
@extend %myclass;
}
}
.class2 {
@media (min-width: 800px) {
@extend %myclass;
}
}
.class3 {
@extend %myclass;
}
.class3 {
color: blue;
}
@media (min-width: 600px) {
.class1, .class3 {
background: red;
}
}
@media (min-width: 800px) {
.class2, .class3 {
font-size: 28px;
}
}
@erquhart
Copy link

erquhart commented Nov 1, 2013

This is being entirely ignored and excluded on compile, not even throwing an error.

Copy link

ghost commented Feb 15, 2014

Sass 3.3 will stop support @extend within any @directive this example is outdated, unless you are using outdated sass/compass versions.

@shaharhesse
Copy link

@peterwiebe
Copy link

funny issue I faced and it seems you have too is that you can't have just a media query inside of a placeholder. If you removed color: blue; on line 2 of input.scss none of the @extend calls would work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment