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

Question

我正在使用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;
    }

}

Answer 1

要使其工作，请修改@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;
    }

}