Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Mike Ziethlow
Mike Ziethlow
60 Points

SASS / SCSS: How can I make a variable change values with different media queries?

I'd like something like:

$header-height:
    if @media only screen and (max-width: 320px) {
        return 60px;
    }
    else
        return 90px;

What's the proper way to do this? Thank you!!

4 Answers

Mike Ziethlow
Mike Ziethlow
60 Points
Mike Ziethlow
Mike Ziethlow
60 Points

So I've answered this with a @mixin and @include pattern, but I don't know if there's a more elegant way of doing it. Please let me know if you have any improvements.

@mixin header-height() {
    @media only screen and (max-width: 600px) {
        height: 60px;
    }
    @media only screen and (max-width: 900px) {
        height: 160px;
    }
}

.header {
    @include header-height;
}

I wanted to break header-height out into its own function because I wanted to use the result value elsewhere without duplicating code.

Mike Ziethlow
Mike Ziethlow
60 Points

This actually doesn't work for me like I need.

I can't reference the variable in another CSS property as I'd like:

DOESN'T WORK

.sidebar {
    margin-bottom: 100vh - (@include header-height);
}

:(

Jacob Mishkin
Jacob Mishkin
23,118 Points

That totally works. Theres nothing wrong with that.

Mike Ziethlow
Mike Ziethlow
60 Points

Jacob Mishkin this doesn't work:

.sidebar {
    margin-bottom: 100vh - (@include header-height);
}

The error I get is:

Invalid CSS after "...ttom: 100vh - (": expected expression (e.g. 1px, bold), was "@include header-hei"

Jacob Mishkin
Jacob Mishkin
23,118 Points

The original mixin for the header height is fine, but when you started using the mixin named header height on other things outside of the header, I kinda got lost. not really sure what you are trying to do with the class sidebar, and also using breakpoint variables. I think for your sidebar you might want to look into the calc() function, but then again I'm not sure what you are trying to do.

Mike Ziethlow
Mike Ziethlow
60 Points
Mike Ziethlow
Mike Ziethlow
60 Points

A gross but working way to do this is:

$header-height-xl: 120px;
$header-height-lg: 120px;
$header-height-md: 90px;
$header-height-sm: 60px;
$header-height-xs: 60px;

And then reference these variables in media queries as needed.

Again, I appreciate any more elegant answers. :)

Alex Plummer
PLUS
Alex Plummer
Courses Plus Student 332 Points
Alex Plummer
Alex Plummer
Courses Plus Student 332 Points

Try this instead:

.sidebar {
    margin-bottom: calc(100vh - #{@include header-height});
}
Devin Rhode
Devin Rhode
30 Points
Devin Rhode
Devin Rhode
30 Points

you can use css custom properties like so:

    --dock-height: 52px;

    @media screen and (min-width: 768px) {
        --dock-height: 0px;
    }