#016: Using Media Queries in Sass | CSS-Tricks

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.

Comments

Gray Ghost Visuals

# September 9, 2012

Chris,

When I first heard you mention this break point naming convention I was like “Brilliant!,” but after using this technique I was like “What’s between them?”

tiny-bear? really-tiny-bear? cousin-bear? grandpa-bear? What if you have more than 3 breakpoints in your design?

Chris Coyier

Permalink to comment# September 9, 2012

Sure, that sounds fine. Whatever works for you (that you can remember). Maybe Alpha, Beta, Gamma, etc. Or arbitrary numbering similar to what you might set up for keeping track of z-index. 100, 200, 300, etc – which might be nice because there is always room in between.

Michael McKenzie

# September 9, 2012

How are you keeping the font icons from bouncing above the nav words? When I start shrinking my page to find break points the icons jump above the words when I hit my break points.

Amrit

# September 9, 2012

Chris excellent use of media queries, another thing I learned today, however upon implementing this style in one of my projects, I found it creates repetitive instances of the media query in the final css stylesheet.

So in the CSS document, rather then outputting…

@media(max-width:1000px)
“all properties for this width”

..it outputs…

“property”
@media(max-width:1000px)…

“another property”
@media(max-width:1000px)…

So although you don’t repeat yourself in development, you do in the processed file. Do you feel this is a small price to pay for increased efficiency?

Chris Coyier

Permalink to comment# September 9, 2012

Do you feel this is a small price to pay for increased efficiency?

I do feel that. For one, gzip eats that repetitive stuff for breakfast. Also, the Sass people are aware of this and are currently considering some ways to improve it.

Michael McKenzie

# September 9, 2012

Never mind, once I applied the media query to catch it they stopped jumping.

andyunleash

# September 10, 2012

Re: SASS/Codekit – how do I find out if I’m using the latest version of SASS? I know that 3.2 went through in August but is there a way to check & confirm within Codekit?

andyunleash

# September 10, 2012

Ah, nevermind –> http://d.pr/i/KxBJ

Rodrigo Ibarra

# September 10, 2012

wit wait… on main-nav you have now something like this

.main-nav{
   a { width: (100%/8 - 0.1); }
}

I understand how’s that working but i’ve never seen that before, how does it work as far as support and stuff…

Chris Coyier

Permalink to comment# September 10, 2012
That’s just math in Sass.

That exact line compiles into:
```
.main-nav a { width: 12.4%; }
```
The 0.1 being a janky fix because of subpixel rounding sometimes being off and bumping the next nav item down onto the next line.

I think the way it’s written in Sass just expresses that idea more clearly. Start with 100%, there are 8 menu items so divide by that, then do the janky fix. Rather than just having the computed value there…

Seth Hall

# September 12, 2012

Another great one. Although the video is a bit blurry. Is that just me or is that a Vimeo upload/compression issue?

Seth Hall

# September 12, 2012

Any chance of implementing a copy to clipboard feature on your code blocks. Nit picky I know, but very useful. I am sure you have considered this and have good reasons for not implementing it, I just thought I would request that feature. Peace.

Chris Coyier

Permalink to comment# September 12, 2012

I used to have that feature, but to be honest it’s kind of a hacky mess (ZeroClipboard, etc). As well as adds weight to the page (theoretically could be loaded as needed, but how complicated do we want to get here? =)).

The real truth is, when I had that feature and reference my own site (which I do often), I didn’t even use it. I preferred just selecting and copying as normal. So in that spirit, I made sure that the code on the site was easy to copy and paste (no line numbers or other weird garbage come over).

webifish

# September 14, 2012

Oh I am really starting to enjoy that! was nice to see that you too have annoying stupid problems when looking for that that grey font color… Can I suggest that we’ll have some kind of indication as for the videos one has already watched? and is it possible to have a “download all movies” link ? Thanks for doing that ! learned loads already.

Aurel

# September 16, 2012

Great stuff! this naming contention on the media queries feels great.

FLDLVL

# September 16, 2012

Stupid question I’m sure but I’ve been stuck with a “Syntax error: Invalid CSS after “…int(mama-bear) “: expected “}”, was “{” on line 74 of . Maybe someone can help me out. SASS 3.2.1 is installed. I’m new, be easy please.

@mixin breakpoint($point) {
  @if $point == mama-bear {
    @media (max-width: 1250px) { @content; }
  }
}

@include breakpoint(mama-bear) {
  background: red;
}

Devin Dombrowski

# September 19, 2012

Wrap your breakpoint in a selector

@mixin breakpoint($point) { 
  @if $point == mama-bear { 
    @media (max-width: 1250px) { @content; } 
  }
} 

body { 
  @include breakpoint(mama-bear) { background: red; } 
}

[email protected]

# September 20, 2012

Hey Chris,

there is a gap between videos #15 and #16. You don’t show how to apply the :hover states for example. Makes it hard to follow the new stuff when I have to figure things out by myself, especially for a newbie like me.

Gary A

Permalink to comment# March 3, 2013
Pause the video at 6:15. Check out the code at lines 95 to 98. There’s the hover.
```
&:hover, &:focus {
  // stuff here 
}
```
If you want a transition, below that do:
```
@include transition(background-color 0.3s ease-in, color 0.35s ease-out);
```

[email protected]

# October 8, 2012

Few comments:

1) I love how this shows using CONTENT (in this case nav) to determine breakpoints as opposed to iPhone/iPad/etc.

2) Using SASS mixins to set properties at breakpoints this way totally makes sense. It should have been this way all along IMHO.

3) As if Oct 2012, Codekit is using SASS 3.2.1 so folks should be good to go.

Dean Birkett

# October 20, 2012

For windows guys using ScoutApp. It is not using SASS 3.2 at present, so this will cause you to get a whole bunch of errors.

To fix:

1) https://github.com/mhs/scout-app/downloads – grab the latest version, this is in alpha at the time of writing, so be aware.

2) If you are also on Windows 7 and get an error when running, this thread may help – https://github.com/mhs/scout-app/issues/19

Gary A

Permalink to comment# March 3, 2013

I believe ScoutApp now uses 3.2 as well.

Ahrengot

# December 6, 2012

Brilliant! I had no idea, you could reference @content from within a mixin. I’ve been looking for a way to do simmilar things for a while. I.e.:

div.box {
    @include do-stuff-to-parent();
}

@mixin do-stuff-to-parent() {
    padding: 2em;
    background: #bada55;

    @content;
}

Jeffrey Walmsley

# March 21, 2013

What is the tool that you are using to measure the pixels on your screen cast. From the videos you just seem to click and drag in any program and you get the distance in pixels

Comments

Leave a Reply Cancel reply