Manually apply CSS breakpoint styles

Question

Is there a way to chain css selectors with media queries, like:

.red,
@media(max-width: 1000px) {
  p {
    color: red;
  }
}

such that paragraphs will be red when the screen is <= 1000px OR when they inherit a red class?

The syntax above doesn't work, but there must be a dry way to do this. Maybe with @extend?

Answer 1

Seems one can do this with a mixin [fiddle]:

html:

<p>HI!</p>
<div><p>HO!</p></div>

css:

@mixin reddify {
  color: red;
}

div > p {
  @include reddify
}

@media(max-width: 1000px) {
  html {
    @include reddify; 
  }
}

The div > p is always red, and the p will be red once the viewport is fewer than n pixels wide.