How to add specific media query rule when media query combined

Question

I have two media query combined like below in my scss file:

    @media all and (min-width: 600px) and (orientation: portrait),
    // add css rule to the above media query
    all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) {
       border: 1px solid #red
       // add specific css rule to current media query only
    }

How would I add a specific rule for each query in that case?

Answer 1

I am afraid you can't do that. This is one query, with two sets of rules, there is no "current" query. You can repeat the rules in new queries like this:

@media all and (min-width: 600px) and (orientation: portrait) {
    // styles
}

@media all and (min-width: 600px) and (orientation: portrait),
all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) {
   // shared styles
}

ps: you are missing the class declaration on your example