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

Question

[Дмитрий Путилов]

Всем привет, возникла проблема с переменными 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, можно ли как один раз глобально экспортировать и больше не делать импорт?

Comments

[Сергей delphinpro]

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

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

Answer 1

[Aetae]

Никак.

Comments

[RimMirK]

Answer 2

[Николай Шабалин]

Ждём спецификацию 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 */
}