使用 vscode 时媒体查询不会从 scss 传输到 css：live sass 编译器

Question

我正在努力使网页设计响应，因此现在尝试使用骨架制动点实现媒体查询。但是当将 scss 文件编译为带有 vs 代码扩展名的 css 时，查询不会出现在 css 文件中，因此在我的网站上不起作用。

.scss 目前看起来确实像这样

.navbar{
    height: 90px;
    background-color: #24252A;
    .maLogo{
    height: 80px;
    text-align: center;
    vertical-align: middle;
    padding-top: 5px;
    padding-bottom: 5px;
    float: left;
    }
    .maName{
    color: white;
    font-family: "Tilt Warp", cursive;
    padding-top: 20px;
    font-size: 40px;
    margin-left: 80px;
    display: block;
    float: left;
    text-decoration: underline;
    }
    li{
        display: none;
        list-style-type: none;
        float:right;
        padding: 15px;
        margin-top: 8px;
        }
        a{
        color: white;
        text-decoration: none;
        font-weight: bold;
        background-color: #0088a9;
        font-size: 22px;
        text-align: center;
        padding: 5px;
        width: 125px;
        display: inline-block;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
        &:hover{
            background-color:#25e6c6;
        }
        &:hover{
            border-radius: 20%;
            -webkit-border-radius: 20%;
            -moz-border-radius: 20%;
            -ms-border-radius: 20%;
            -o-border-radius: 20%;
            transition: 0.5s;
            -webkit-transition: 0.5s;
            -moz-transition: 0.5s;
            -ms-transition: 0.5s;
            -o-transition: 0.5s;
}
}
    }
    @media(min-width: $bp-larger-than-desktophd){
        .navbar li{
            display: block;
        }
    }

如果我直接在我的 .css 文件中实现查询，一切正常。那么为什么查询没有从 scss 编译到 css？