Как подставить в @media screen переменную из css?

Всем привет, возникла проблема с переменными css, имеются вот такие вот стили css

.container {   max-width: 1400px;   margin: 0 auto; }  @media screen and (max-width: var(--breakpoint-xxl)) {   .container {     max-width: var(--breakpoint-xl);   } }

Так же имеются вот такие вот с переменые

:root {   --breakpoint-sm: 576;   --breakpoint-md: 768;   --breakpoint-lg: 992;   --breakpoint-xl: 1200;   --breakpoint-xxl: 1400; }

И проблема в том, что в этом случае это не срабатывает. Я прочитал, что так сделать не получится, а можно ли как то это обойти. У меня устанволен препроцессор scss, но я не хочу в каждый файл делать импорт breakpoints.scss, можно ли как один раз глобально экспортировать и больше не делать импорт?

Дополнительно:

Насколько я помню, в условии медиазапроса css-переменные использовать нельзя.

Можно использовать препроцессорные переменные. В качестве примера использования можно посмотреть бутстрап.

Ответы:

Никак.

Ждём спецификацию Media Queries Level 5.

В целом, если хотите включить возможности работы спецификации не имплементированной в браузеры, то можно подключить postcss-плагин PostCSS Custom Media, тогда можно будет использовать кастомные свойства вот так:

@custom-media --small-viewport (min-width: 768px);  @media (--small-viewport) { 	/* стили для планшета */ }  /*  в css получится вот так*/  @media (min-width: 768px) { 	/* styles for small viewport */ }