关于SCSS，媒体查询代码优化错误？

Question

想写一段关于媒体查询的代码，如下：

$grid-map: (
    gridlg: 2000px,
    gridmd: 1500px,
    gridsm: 1000px,
    grid6p: 500px
);

@mixin grid($width){
    @if($width<map-get($grid-map, grid6p)){
        @media only screen and (max-width: map-get($grid-map, grid6p)){
            @content;
        }
    }@else if($width<map-get($grid-map, gridsm)){
        @media only screen and (max-width: map-get($grid-map, gridsm)){
            @content;
        }
    }@else if($width<map-get($grid-map, gridmd)){
        @media only screen and (max-width: map-get($grid-map, gridmd)){
            @content;
        }
    }@else if($width<map-get($grid-map, gridlg)){
        @media only screen and (max-width: map-get($grid-map, gridlg)){
            @content;
        }
    }
}

以上代码目前达到了预期的效果，但想对代码进行如下优化，如下：

$grid-map: (
    gridlg: 2000px,
    gridmd: 1500px,
    gridsm: 1000px,
    grid6p: 500px
);

@mixin grid($width){
    @each $key, $value in $grid-map{
        @if($width<$value){
            @media only screen and (max-width: map-get($grid-map, $key)){
                @content;
            }
        }
    }
}

但是编译有问题，似乎我对 map 属性理解的不透彻，还望高手指导解答，谢谢！