这些 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;
    }

}