Skip to content

Instantly share code, notes, and snippets.

@blackfalcon
Last active February 28, 2016 01:06
Show Gist options
  • Save blackfalcon/4119580 to your computer and use it in GitHub Desktop.
Save blackfalcon/4119580 to your computer and use it in GitHub Desktop.
Extending placeholder selectors within media queries
%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;
}
}

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 @sassmeisterapp for providing the test bed.

This 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.

The SCSS

%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 

The CSS

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

nex3 commented Nov 27, 2012

The code listed here is still in error. Since %myclass defines styles outside of @media (min-width: 600px), you may not extend %myclass within @media (min-width: 600px) since those styles can't be added in the proper scope.

The change in Sass 3.2.3 just ensures that the two following snippets are equivalent:

@media (min-width: 800px)
  .class
    @extend %myclass

.class
  @media (min-width: 800px)
    @extend %myclass

Neither of these is valid if %myclass defines styles outside of @media (min-width: 800px).

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