O'Reilly logo

Pragmatic Guide to Sass by Michael Lintorn Catlin, Hampton Catlin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

24Changing 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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required