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

Привет! К сожалению, переменные CSS не могут быть использованы напрямую внутри медиа-запросов. Однако, есть способ обойти эту проблему, используя препроцессоры CSS, такие как SCSS.

Для того чтобы использовать переменные в медиа-запросах, вы можете использовать миксины SCSS. Вместо того чтобы использовать медиа-запросы напрямую, вы можете создать миксин, который принимает параметр с разрешением экрана и использует его внутри медиа-запроса.

Например, вы можете создать миксин под названием "media-query" следующим образом:

```scss
@mixin media-query($breakpoint) { 
  @media screen and (min-width: $breakpoint) {
    @content; // Вставьте ваш стиль .container здесь
  }
}
```

Теперь вы можете использовать этот миксин в коде следующим образом:

```scss
.container {
  // Стили для .container

  @include media-query(var(--breakpoint-xxl)) {
    // Стили для .container, когда медиа-запрос активен
  }
}
```

Таким образом, ваш стиль .container будет применяться только для экранов с разрешением, указанным в переменной --breakpoint-xxl.

Чтобы использовать миксин глобально, вы можете создать отдельный файл с миксинами и импортировать его в каждый SCSS файл, где вы используете медиа-запросы.

Надеюсь, это поможет вам решить вашу проблему! Если у вас возникнут еще вопросы, не стесняйтесь задавать их.

Нельзя изменить это.

Если вы хотите использовать возможности, которых нет в браузерах, вам потребуется подключить плагин PostCSS Custom Media, который позволит вам использовать кастомные свойства, например так:@custom-media --small-viewport (min-width: 768px);

@media (--small-viewport) {
	/* стили для планшета */
}

/*  в css получится вот так*/

@media (min-width: 768px) {
	/* стили для маленького экрана */
}