kaelig/input.scss

## readme.md

      
    Raw
  

              readme.md
            
          
    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.

  
## input.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;
}

## output.css
.class3 {
  color: blue;
}
@media (min-width: 600px) {
  .class1, .class3 {
    background: red;
  }
}
@media (min-width: 800px) {
  .class2, .class3 {
    font-size: 28px;
  }
}
	%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;
	}