Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Sass Basics Add Reusable Logic to Your Sass Storing Values in Maps

Mark Figueroa
seal-mask
.a{fill-rule:evenodd;}techdegree
Mark Figueroa
Front End Web Development Techdegree Student 8,074 Points

General help understanding how the condition works

If I understand this correctly (not at all sure if I do), if the breakpoints/break value is smaller than the 'sm' value, then the 'if' declaration will find that smaller value, in this case the 'xs' value and then set said smaller value as the max-width... (?)

But, if the value is not smaller than 'sm', then the 'else' will identify the width and insert the appropriate breakpoint... (?)

2 Answers

I am confused with the question. >.>
So let's say sm = 768px, and xs = 320px,

max-width: @sm means any value less than or equals to 768px (that includes xs / 320px)
min-width: @sm means any value greater than or equals to 768px

through my experience though, 767px frequently act like a dead pixel that did not put any rules into account, so i normally put the rules as max-width: 767.98px.

Hi Mark,

It seems like you have the conditional logic down. The first @if statement says that if the $value is less than our 'sm' breakpoint, which we have set to the variable $sm, then that $value will be used as the max-width for the media query. If we hard code in some values it may help make things a little more clear:

@mixin mq(575px){
    $value: map-get($breakpoints: 575px);
    $sm : map-get($breakpoints: 576px);

    @if 575px < 576px{
        @media(max-width: 575px)
    }
}

//In this scenario the code stops running here since the condition was met
@mixin mq(768px){
    $value: map-get($breakpoints: 768px);
    $sm : map-get($breakpoints: 576px);

    @if 768px < 576px{
        // @media(max-width: $value) this code doesn't run since the condition was false
    }
    @else {
        @media (min-width: 768px)
    }
}

//In this scenario, since the @if conditional was false, the code proceeds to the @else
//conditional where the $value variable is used as the min-width.

Remember that all the information the conditional has is what we are passing to it. We've already set the $breakpoints as a map. So, the @else conditional isn't so much inserting the appropriate breakpoint as it is inserting the breakpoint that we told it to evaluate.

I hope this makes sense...conditional logic is tricky at times. I'm still learning and it jams me up quite a lot. It's taken me about 15 minutes to even type up this response because I kept getting hung up on different points. Anyway, if I've steered you wrong, please let me know, but otherwise, happy coding!