| 24 | Changing Looks with Nested @media |
Sometimes we’d like to change what is displayed based on the device on which the content is being displayed. CSS2 introduced the concept of @media. Various attributes, such as print, handheld, or tv can be used to define different property values, such as font sizes, depending on the medium used to view the page.
The main flaw with @media is that it can’t be nested. Say you want to have all the main areas in 15px font, except for when you print the document. In CSS, you’d have to copy out all the declarations again.
Sass to the rescue! We can just add in another declaration specifically for one type of media, and it’s compiled into a whole new selector when the CSS style sheet is made.
This is particularly ...
Get Pragmatic Guide to Sass now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
