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

Yoke Lee
Yoke Lee
2,856 Points

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!