nested media queries not compiling correctly

[gabdara]

@media (min-width: $screen-sm-min) {
    .class {color: #000;}

    @media (max-width: $screen-sm-max) {
        .class {background: red;}
    }
}

This results in:

@media (min-width: 768px) {
    .class {color: #000;}

    @media (max-width: 991px) {
        .class {background: red;}
    }
}

It should result:

@media (min-width: 768px) {
    .class {color: #000;}
}

@media (min-width: 768px) and (max-width: 991px) {
    .class {background: red;}
}