named-breakpoints-media-queries-preprocessnig.css

/*

Here's one way you might be able to use the concept of having a defined set
of named breakpoints in CSS for the purpose of preprocessing media queries.

Imagine you have a global configuration where your breakpoints are listed,
along with the associated names, then you are able to write other CSS targeting
those named breakpoints:

*/

:root {
  --media-query: --breakpoints(
    320px phone
    768px tablet
    1024px desktop
  );
}

@supports (--breakpoint(phone)) {}
@supports (--breakpoint(tablet)) {}
@supports (--breakpoint(desktop)) {}

/* This could be transformed into or interpreted as this kind of CSS output: */

@media (min-width: 320px) {}
@media (min-width: 768px) {}
@media (min-width: 1024px) {}

/*

So there might be all sorts of other applications for a special value syntax
for the concept of "named breakpoints" no matter what that syntax looks like.

*/