How to add specific media query rule when media qu

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

You can use variables to save queries. Also nest @media to keep them organized because all @media rules won't be nested in CSS. It would be nice to interpolate in @media rules but it is not working yet.

$media: 'all and (min-width: 600px) and (orientation: portrait)';
$media2: 'all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait)';

@media #{$media} {
   color:red;

  @media #{$media}, #{$media2} {
      color:blue;
  }
}

Answer 2

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