media queries的书写顺序问题

@mixin breakpoint($point) {
    @if $point == big {
        @media (max-width: 1024px) { @content; }
    }
    @else if $point == middle {
        @media (max-width: 800px) { @content; }
    }
    @else if $point == small {
        @media (max-width: 320px)  { @content; }
    }

}

很简单的一个定义，即对三种不同的分辨率进行了定义，现在我需要根据不同的分辨率来调整body的背景色，于是我这样写了下来：

body{
    background-color:black;
    @include breakpoint(small){
        background-color:blue;
    }
    
    @include breakpoint(middle){
        background-color:green;
    }


    @include breakpoint(big){
        background-color:red;
    }
}

到浏览器刷新后，发现只有当窗口大小到<=1024px的时候进行了一次变色(即body变成红色)，为什么呢？为什么分辨率到达800px和320px的时候没有反应呢？其实仔细想了一下很简单，因为@include breakpoint(big)是在最后调用的，前面的small、middle起作用了，但因为后面的1024大于800和320，覆盖了前面。

而我们把调用的地方改成这样就可以了：

body{
    @include breakpoint(big){
        background-color:red;
    }
    @include breakpoint(middle){
        background-color:green;
    }
    background-color:black;
    @include breakpoint(small){
        background-color:blue;
    }
}