Incorrect ordering

[scottlet]

If I’m writing sass, I often add MQs inline, but this tool orders them incorrectly unless I use them in the correct order.

EG:

body {
    @include font-size(26);
    @media screen and (max-width: 414px) {
        @include font-size(18);
    }
}


h1 {
    left: 105px;
    right: auto;
    top: 138px;

    @media screen and (max-width: 768px) {
        left: 50px;
        right: 50px;
        top: 50px;
    }

    @media screen and (max-width: 414px) {
        left: 20px;
        right: 20px;
        top: 20px;
    }
}

This does not work correctly, it outputs:

 body {
    font-size: 26px;
    font-size: 2.6rem
}
h1 {
    left: 105px;
    right: auto;
    top: 138px
}
@media screen and (max-width:414px) {
    body {
        font-size: 18px;
        font-size: 1.8rem
    }
    h1 {
        left: 20px;
        right: 20px;
        top: 20px
    }
}
@media screen and (max-width:768px) {
    h1 {
        left: 50px;
        right: 50px;
        top: 50px
    }
}

This is wrong, the max-width rules should be in descending order, not in order of appearance.
If I add an extra max-width:414 rule that does nothing to the body above, e.g.:

body {
    @include font-size(26);
    @media screen and (max-width: 768px) {
        @include font-size(26);
    }
    @media screen and (max-width: 414px) {
        @include font-size(18);
    }
}


h1 {
    left: 105px;
    right: auto;
    top: 138px;

    @media screen and (max-width: 768px) {
        left: 50px;
        right: 50px;
        top: 50px;
    }

    @media screen and (max-width: 414px) {
        left: 20px;
        right: 20px;
        top: 20px;
    }
}

Then I get code that works:

body {
    font-size: 26px;
    font-size: 2.6rem
}
h1 {
    left: 105px;
    right: auto;
    top: 138px
}
@media screen and (max-width:768px) {
    body {
        font-size: 26px;
        font-size: 2.6rem
    }
    h1 {
        left: 50px;
        right: 50px;
        top: 50px
    }
}
@media screen and (max-width:414px) {
    body {
        font-size: 18px;
        font-size: 1.8rem
    }
    h1 {
        left: 20px;
        right: 20px;
        top: 20px
    }
}

[hail2u]

This is a sort of bug, but I want to say it’s a limitation. Sorting queries automagically can be very hard.

In most case, you use media queries less than 5. I suggest defining queries’ order at first with comment. If you go with min-width queries, try sort options instead.