General help understanding how the condition works

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!