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

Question

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

我想做的是在 window 调整大小时缩小导航栏的高度。下面是我的媒体查询，但是它们并没有像我期望的那样工作。

$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;
    }

}