Treehouse: Grow your CSS skills. Land your dream job.

Learning SASS – Media Query question

  • # May 14, 2013 at 5:32 am

    Hello, I’m on SASS day 2.

    Variables for color, Functions for em conversion make perfect sense to me and I can see this is a valuable and time saving thing.

    I’m having a problem with media queries as mixins. I like having the media queries in one place…rather than nested in each style.

    Again I can see a benefit for major breakpoints here…but what about minor breakpoints? I don’t want to give a breakpoint a name if it only serves to move a logo by 10 pixels in-between two major breakpoints.

    How is everyone else addressing these minor breakpoints? Does anyone opt for using standard CSS for media queries?



    # May 14, 2013 at 6:12 am

    I have a bit of a mix of how I handle it. I am a big fan of [Breakpoint](, with a few “major” breakpoints, and then I specify the minor ones without using variables but only that one.

    I do tend to nest the breakpoints in the elements that they concern, because to me that makes a lot more sense, but it works whether or not I use a mixin or standard CSS.

    Do however you feel that your workflow and code is best helped, use as much (or little) of Sass as you’re interested in. I hope this helped, if not feel free to ask for clarifications.

    # May 14, 2013 at 6:33 am

    That’s very helpful thanks.

    My concern – especially handing over files that there would be nested media queries and standard media queries and that might seem confusing. We do some template handovers for internal development teams you see…

    Maybe if I do as you suggest I could have the minor tweaks in standard CSS I could make sure it’s appropriately named as such.

    # May 14, 2013 at 6:42 am

    Yes, I understand fully. Are the templates handed over in Sass?

    An example on how I do it is the following:

    html {
    font-size: (14/16)*100%;
    line-height: 1.5;

    @include breakpoint(24em) {
    font-size: 100%;

    @include breakpoint(40em) {
    font-size: (18/16)*100%;
    @include breakpoint(117em) {
    font-size: (20/16)*100%;

    * {
    @include box-sizing(border-box);
    text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;

    Where replacing the `@includes` with normal breakpoints work perfectly fine.

    # May 14, 2013 at 6:49 am

    Yes, looks good / how I’ve been working it out.

    Unfortunately I think the template requirements will be different on a project by project basis so I don’t want the compiled .css file structure to look too weird and hard to navigate for a non sass user that’s all.

    # May 14, 2013 at 6:53 am

    yes, if you’re needing to have a readable .css file, you’re probably better off not nesting them. You can use breakpoint in that way, or just use “normal” media queries in separate partials and include them at the bottom of the file.

    # May 14, 2013 at 7:12 am

    Thanks for the advice, extremely helpful.

    # May 14, 2013 at 7:14 am

    You’re welcome =)

    Something worth to re-iterate: Any valid CSS is valid Sass.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.