#016: Using Media Queries in Sass

(Updated on )

We introduce the concept of @media queries in CSS.

A lot of what using Sass on this project allows us to do is stay DRY (don’t repeat yourself). We did that setting color and size variables. We did that with our font stacks. Now we’re doing it again with media queries. Anytime we need a media query, we now have a @mixin we can use. That way if we need to adjust them, we can change them in just one place.

Instead of naming our media queries stuff like “iPad” or anything overly specific like that, we’ll just use some arbitrary but understandable names like “Baby Bear” and “Papa Bear”.

We start with a wide screen, then narrow it down until the navigation looks bad, and that’s our first media query break. At that point we break the navigation into two rows of four instead of one row of eight. We have to adjust the shadows to have it look right.

We also adjust the width of the page wrap at certain media queries, which means we need to tweak how the logo works too.