Plain CSS does not support variables in media queries (yet)

It's not possible to use variables in media queries with plain CSS.

Copy@media (max-width: var(--some-pixel-size)) { ... } /* Does not work */

Postcss Plugin

If you're using PostCSS to postprocess your CSS, you can configure postcss-custom-media and add this feature:

Copy@custom-media --small-variable-name(max-width: 968px);

@media (--small-variable-name) { ... } /* works */