Max Width At Rule - tomhodgins/process-css-demo GitHub Wiki

A simple shorthand for writing a media query for @media (max-width: ) {} as @--min-max {} instead.

@--max-width <mf-value> { <list of css rules> }

• <mf-value> is a valid CSS media feature value, one of <number>, <dimension>, <ident>, <ratio>
• <list of css rules> is a list of CSS rules to be added to the CSS output, using the selector :--self as a placeholder to represent each matching element in the page

The following max-width query would apply to the page when the viewport is narrower than 500px:

@--max-width 500px {
  a {
    color: red;
  }
}

@media (max-width: 500px) {
  a {
    color: red;
  }
}