CSSNEXT: как использовать переменные с медиа-запросами в CSS Далее

Question

Я пытаюсь использовать переменные для указания точек останова с помощью плагина CSSnext.

В настоящее время мой CSS выглядит следующим образом:

@media (width <= var(--screen-md-min)) { 
    background-color: var(--brand-purple-dark);  
} 

, но когда я пытаюсь запустить это я получаю следующее предупреждение в консоли:

5: Missing @custom-media definition for '--screen-md-min'. The entire rule has been removed from the output. 

Этот код работает отлично, если я заменю вар (--screan-md-min) с фактическими пикселями. Я уверен, что это просто проблема с синтаксисом, но документация CSSnext не делает использование переменных очень ясным.

Answer 1

cssnext только реализует будущие спецификации. В спецификациях невозможно использовать пользовательские свойства (что «зависит от dom (: root is html)) в медиа-запросе (который не зависит от dom, а зависит от устройства).

Тем не менее, люди, работающие на спецификации CSS думали о решении для запросов пользовательских средств массовой информации. Это @custom-media.

@custom-media --small-viewport (width < 30rem); 

@media (--small) { 
    /* styles for small viewport */ 
} 

Некоторые другие информации

• http://cssnext.io/features/#custom-media-queries
• https://github.com/MoOx/postcss-cssnext/issues/253