Twitter bootstrap 3 这些SCSS媒体查询有什么问题

我正在使用Twitter Bootstrap 3.3.3的官方Sass端口

我试图做的是在调整窗口大小时缩小导航栏的高度。下面是我的媒体查询，但它们并不像我期望的那样有效

$navbar-height: 60px !default;

body {
    padding-top: 70px !important;
}

@media(min-width: 768px) {

    $navbar-height: 70px;

    body {
        padding-top: 80px !important;
    }

}

@media(min-width: 992px) {

    $navbar-height: 80px;

    body {
        padding-top: 90px !important;
    }

}

@media(min-width: 1200px) {

    $navbar-height: 90px;

    body {
        padding-top: 100px !important;
    }

}

---

要使其工作，请修改@media查询中的元素，而不是变量。比如说

$navbar-height: 60px !default;

body {
    padding-top: 70px !important;
}

@media(min-width: 768px) {

    .nav-bar: $navbar-height + 10px;

    body {
        padding-top: 80px !important;
    }

}

@media(min-width: 992px) {

    .nav-bar: $navbar-height + 20px;

    body {
        padding-top: 90px !important;
    }

}

@media(min-width: 1200px) {

    .nav-bar: $navbar-height + 30px;    

    body {
        padding-top: 100px !important;
    }

}