CSS native variables not working in media queries

Question

I am trying to use CSS variables in media query and it does not work.

:root {
  --mobile-breakpoint: 642px;
}

@media (max-width: var(--mobile-breakpoint)) {         


        

Answer 1

One way to achieve what you want is using npm package postcss-media-variables.

If you are fine with using npm packages then you can take a look documentatoin for same here

• postcss-media-variables

Example

/* input */
:root {
  --min-width: 1000px;
  --smallscreen: 480px;
}
@media (min-width: var(--min-width)) {}
@media (max-width: calc(var(--min-width) - 1px)) {}

@custom-media --small-device (max-width: var(--smallscreen));
@media (--small-device) {}