Using the @extend directive together with the @media at-rule

In this recipe, you will see that the @extend directive can only be used to extend selectors in the same @media block. In the Media Queries with Breakpoint recipe of Chapter 8, Advanced Sass Coding, and in the Creating responsive grids recipe of Chapter 9, Building Layouts with Sass, the @media at-rule will be discussed in more detail.

Getting ready

In this recipe, you will create style rules with the @media print media query blocks; styles within these blocks will only be applied while generating printed output. If you want to test your compiled print style sheets, your system should be able to print web pages. You can print the output to both paper and files (PDF).

You can edit Sass templates with your favorite text editor. The Writing your code in a text editor recipe of Chapter 1, Getting Started with Sass, describes how to edit these templates with a text editor. Then, compile your templates with the Ruby Sass compiler. Read...