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;
}
}
@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