What is wrong with these SCSS media queries

Question

I am using the official Sass port of Twitter Bootstrap 3.3.3.

What I am trying to do is shrink the height of the navbar when the window is resized. Below is my media queries, however they don't work as I expect them to.

$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

To make it work modify the element inside the @media query not the variable. So for example...

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

}