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

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

@--min-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 min width query would apply to the page when the viewport is 500px or wider:

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

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