One approach to handle this is by creating multiple selectors, although it may not be considered the most optimal solution. Personally, I find it effective in scenarios like this.
@media #{$mobile-portrait},
@media #{$tablet-portrait} {
height: 100px;
width: 100px;
}
UPDATE: An alternate method that achieves the same outcome is as follows.
@media #{$mobile-portrait}, @media #{$tablet-portrait} {
height: 100px; width: 100px;
}
I believe organizing the selectors on separate lines enhances the aesthetics and clarity, especially with longer selectors where line breaks can aid in differentiation.
Similarly, having styles listed on individual lines prevents confusion when dealing with multiple properties within a selector.
UPDATE 2: The comma essentially functions as a logical or within a media query context.
In accordance with the explanation provided in this MDN article:
Comma-Separated Lists
Comma-separated lists operate similarly to the logical operator or when utilized in media queries. If any of the media queries within a comma-separated list evaluates to true, the corresponding styles or style sheets will be applied. Each media query in this type of list is treated independently, meaning alterations to one query do not affect the others. As such, different media features, types, and states can be targeted through comma-separated media queries.
This implies that the second @media statement is redundant:
@media #{$mobile-portrait}, #{$tablet-portrait} {
height: 100px;
width: 100px;
}