Я пытаюсь использовать переменные CSS в медиа-запросе, и это не сработает.Собственные переменные CSS, не работающие в запросах на средства массовой информации
:root {
--mobile-breakpoint: 642px;
}
@media (max-width: var(--mobile-breakpoint)) {
}
Из spec,
var()функция может быть использована вместо любой части значения в любое свойство на элементе. Функцияvar()не может использоваться как имена свойств, селекторы или что-либо еще, кроме значений свойств. (Это обычно приводит к недопустимому синтаксису, или же значение которого значения не имеет никакого отношения к переменному.)
Так нет, вы не можете использовать его в запросе медиа.
И это имеет смысл. Потому что вы можете установить --mobile-breakpoint, например. до :root, то есть элемент <html>, и оттуда унаследованы другие элементы. Но медиа-запрос не является элементом, он не наследуется от <html>, поэтому он не может работать.
Это не то, что пытаются выполнить переменные CSS. Вместо этого вы можете использовать препроцессор CSS.
По-видимому, просто невозможно использовать собственные переменные CSS. Это один из limitations.
Умный способ использовать переменные в медиа-запросе, чтобы повлиять на весь ваш стиль. Я рекомендую this article.
:root {
--gutter: 4px;
}
section {
margin: var(--gutter);
}
@media (min-width: 600px) {
:root {
--gutter: 16px;
}
}
Я не знаю, t понять смысл «изменить переменные в медиа-запросе», вы можете показать пример? –
Это не то, что я имел в виду. Я спросил о значении медиа-запроса. –
Да, просто так, это в статье, которую я связал. Я знаю, что это не то, что вы ожидали, но переменные CSS ** просто не могут использоваться для определения медиа-запросов ** – Cohars
Один из способов достижения желаемого результата - использование пакета npm postcss-media-variables.
Если вы хорошо с помощью NPM пакетов, то вы можете посмотреть documentatoin для такого же здесь
Пример
/* input */
:root {
--min-width: 1000px;
--smallscreen: 480px;
}
@media (min-width: var(--min-width)) {}
@media (max-width: calc(var(--min-width) - 1px)) {}
@custom-media --small-device (max-width: var(--smallscreen));
@media (--small-device) {}
Спасибо, но я пытался не использовать какой-либо препроцессор. –
Как и другие ответили, CSS Variables Level 1’s var() cannot be used in media queries. Тем не менее, были последние события, которые будут решать эту проблему. Через несколько лет, когда CSS-переменные уровня 2 более стандартизированы и реализованы, мы сможем использовать переменные env() в медиа-запросах.
Недавно Рабочая группа CSS решила, что CSS Переменный уровень 2 будет поддерживать пользовательские переменные среды с помощью env(), и они будут пытаться сделать их действительными в средствах массовой информации запросов. Группа решила это после того, как Apple впервые предложила стандартные свойства пользовательского агента, незадолго до официального анонса iPhone X в сентябре 2017 года (см. Также WebKit: “Designing Websites for iPhone X” by Timothy Horton). Затем другие представители браузера согласились, что они будут в целом полезны для многих устройств, таких как телевизионные дисплеи и чернильная печать с краями кровотока. (env() обычно назывался constant(), но теперь он устарел. Вы все равно можете видеть статьи, относящиеся к старому имени, например this article by Peter-Paul Koch.) Через несколько недель Камерон Маккормак из Mozilla поняла, что эти переменные среды будут использоваться в медиа-запросах, а Таб Аткинс-младший из Google затем понял, что пользовательские переменные среды будут особенно полезны в качестве глобальных, неперехвачиваемых корневых переменных используемых в медиа-запросах. Теперь, Дин «Дино» Джексон из Apple присоединится к Аткинсу в процессе редактирования. Уровень 2.
Вы можете подписаться на обновления по этому вопросу в w3c/csswg-drafts GitHub issue #1693. (Для особенно важных исторических данных также разверните свои встроенные журналы IRC и выполните поиск всех сообщений для «MQ» = «медиа-запросы».)
Я планирую обновить этот вопрос в будущем, когда произойдет больше событий. Будущее захватывающее.
Обновление 2018-02-08: Safari Technology Preview 49 добавило поддержку для разбора calc() в медиа-запросах, что может быть прелюдией к поддержке env() в них.
У вас есть несколько браузеров? (Как Chrome и Firefox) – Cohars
Да, я нахожусь на последнем Chrome –
Какой препроцессор css вы используете? Что вы пытаетесь достичь? –