Что такое переменные css
Основные варианты использования CSS-переменных (Custom Properties)
CSS Variables или CSS Custom Properties уже давно используются в разработке и поддерживаются большинством популярных браузеров. Если у вас нет обязательного требования разрабатывать под IE, то вполне вероятно, вы уже успели оценить их преимущества.
По этой теме написано множество статей, но я сфокусируюсь на том, чтобы показать распространенные кейсы по использованию, которые сам применял на практике. Будет мало теории, но много кода.
Варианты использования
1. Определение переменных
Начнём с базовых вещей, а именно: как определять переменные. Стоит помнить, что их можно определить как в корневом элементе :root (переменные будут доступны по всему приложению), так и внутри любого селектора (будут доступны только для выбранного элемента и его дочерних элементов):
2. Переопределение переменных
3. Локальный fallback
4. Привязка переменных
При объявлении переменных могут использоваться другие переменные:
5. Переменные в calc()
На выходе получим результирующее значение в той единице измерения, на которую умножили.
6. Прозрачность в цветовых функциях
Вот стандартный пример по использованию hex-цвета для определения значения переменной:
Часто бывает, что для цвета нужно задавать различную прозрачность. В CSS для этого есть:
#rrggbbaa hex color notation
Использование rgba()
Альфа-канала для задания прозрачности
На самом деле, внутри CSS допускается использовать практически всё (за небольшим исключением), даже код на JavaScript!
На выходе собираются аргументы для rgba() : значения из переменной и альфа-канала.
По итогу получаем цвет:
Использование hsla()
При использовании, указываем все базовые параметры в селекторе.
Меняем один / несколько переменных в селекторе (изменения коснутся только данного селектора и его дочерних элементов).
На выходе получаем цвет:
7. Переменные в SVG
Значение переменной можно переопределять при необходимых условиях: например, при событии hover на SVG:
Использование с JavaScript. API CSS Style Declaration
CSS переменные работают в runtime, в отличие переменных препроцессоров. Это значит, что мы можем получить к ним доступ в процессе работы приложения через JavaScript.
Рассмотрим, как можно работать с CSS переменными через JavaScript:
В CSS у нас есть 2 переменные:
А вот код на JavaScript:
Для примера, я показал все возможные действия с переменными: чтение, изменение, удаление. Использовать операции можно по необходимости.
Вычисленные свойства
В коде выше я затронул тему «Вычисленных свойств». Рассмотрим подробнее: для этого создадим небольшой пример:
Единицы измерения можно подразделить на абсолютные и относительные:
Относительные (н-р: rem ) формируются относительно заданного параметра.
Для отображения, относительные единицы измерения должны быть преобразованы в абсолютные. Если мы откроем инспектор объектов в Google Chrome (или другом браузере) на вкладке «Elements», то сможем увидеть это преобразование:
Небольшую демку по изменению цветовой схемы можно посмотреть здесь.
Проверка поддержки переменных
Достоинства и ограничения
Работают в runtime, в отличие от переменных препроцессоров
Можно обратиться из JavaScript
В именах обычных свойств CSS: var(—side): 10px
В значениях media-запросов: @media screen and (min-width: var(—desktop))
В подстановке URL: url(var(—image))
Заключение
Использование CSS-переменных еще один шаг к отказу от препроцессоров. Ждем реализации миксинов @apply на CSS и CSS Nesting Module!
Краткое руководство по переменным в CSS (причины использования, синтаксис и примеры)
Я уже достаточно давно экспериментирую с CSS-переменными. Если вы к ним еще не подступались, вы можете воспользоваться этим кратким руководством, чтобы быстро во всем сориентироваться и приступить к работе.
Что это такое?
Простой пример применения для кнопок с областью видимости
CSS-переменные позволяют вам определять многократно используемые значения в CSS.
Они появились уже достаточно давно. Недавно они стали набирать популярность в связи с более широкой поддержкой браузерами.
Если вы пользуетесь препроцессором, например SASS, то с переменными вы уже знакомы. Теперь можно делать все то же самое без препроцессора.
Зачем использовать переменные стиля?
Переменные позволяют нам придерживаться принципа DRY (don’t repeat yourself). Благодаря им у нас также появляется способ создать единую точку ссылки для повторяющихся значений. Если вы пользуетесь препроцессором, то, скорее всего, преимущества такого подхода вам уже знакомы. Чаще всего это используют, чтобы задать основной цвет, который используется для множества элементов.
Повтор фонового цвета для нескольких селекторов
Во фрагменте выше значение #e74c3c могло бы и должно бы быть переменной. Если из этого значения сделать переменную, у нас получится единая точка, на которую можно ссылаться. Это снижает риск появления багов и проблем со стилем, поскольку облегчает дальнейшее обслуживание.
Создание точки ссылки с помощью переменной
Почему бы не пользоваться переменными препроцессора вместо нативных CSS-переменных?
Хороший вопрос. В большинстве случаев вы предпочтете сохранить приверженность переменным препроцессора. Это так, если вы ими уже пользуетесь. Но можно применять преимущества обоих подходов сразу. Это становится актуально, когда возникает необходимость в полной мере задействовать возможности нативных CSS-переменных. Об этом позже.
Нативные CSS-переменные стоит применять когда:
Главные преимущества нативных CSS-переменных
На мой взгляд нативные CSS-переменные имеют два больших преимущества.
Первое. Они обновляются во время выполнения! Ими можно управлять с помощью медиазапросов, состояний или даже JavaScript. Браузер применит внесенные изменения. Это открывает много возможностей.
Кроме того, CSS-переменные позволяют учитывать область видимости. Это означает, что можно поменять, допустим, стиль или поведение элемента путем обновления значения переменной. В противном случае приходится с нуля прописывать новые стили для этого элемента. В результате объем СSS на выходе уменьшается.
Не самый красивый синтаксис
Давайте рассмотрим пример.
Чтобы определить переменную, в качестве префикса используется два дефиса.
А что происходит, когда мы ссылаемся на переменную, значение которой не задано? В этом случае можно задать резервные значения или значения по умолчанию. Функция var поддерживает второй необязательный параметр, соответствующий резервным значениям или значениям по умолчанию.
Нет необходимости использовать переменную для нашего фолбека. Можно взять значение. Но с переменными будет проще осуществлять поддержку кода.
Обратите внимание, что для button.btn никаких стилей не объявлено. Вместо этого обновляется значение. Теперь уместно перейти к каскадированию и областям видимости.
Каскадирование и области видимости
Стоит отметить, что, как и в случае со встроенными стилями, встроенные CSS-переменные имеют наивысший приоритет.
Управление значениями
Управлять значениями CSS-переменных можно с помощью других CSS-правил. Основные подходы — медиазапросы и изменения состояния.
Например, значение переменной может меняться, когда ширина экрана превышает некую величину.
Изменение запустит перерисовку браузера и покажет результат пользователю.
Управление значениями с помощью JavaScript
Управлять переменными из СSS очень удобно. Но чтобы по-настоящему получить контроль над ними, придется управлять ими посредством JavaScript. К счастью, это реально.
Метод setProperty позволяет задавать переменные стиля элемента и управлять ими.
Использование calc() и отказ от единиц измерения
Постарайтесь не использовать единиц измерения в переменных. Это облегчит дальнейшее обслуживание.
Функция calc() позволяет нормализовать и задавать значения с желаемыми единицами измерения.
CSS-переменные можно даже использовать для хранения информации о предпочитаемых единицах измерения. Во фрагменте для наглядности мы взяли «1px», но можно заменить это на «1pt», «1rem» и т.д.
Отсутствие единиц измерения, как правило, более актуально, когда значения задаются из JavaScript. При обработке чистых значений наш скрипт абстрагируется от CSS. Нарушается связь.
Когда единицы измерения содержатся в CSS, обслуживание тоже проходит через CSS.
Примеры применения
Я все еще изучаю различные примеры применения CSS-переменных. В первую очередь в голову приходит динамическая темизация. Отслеживание курсора и прокрутки экрана — тоже любопытные применения. Я подготовил обучающие материалы, которые можно найти ниже.
Пример с собакой и мячиком
Давайте один пример проработаем вместе!
Здесь мы просто отслеживаем положение курсора и обновляем положение двух эмодзи.
Главное здесь — перенести эмодзи из центральной точки с помощью translate и одновременно применить transition-delay для собаки.
Вот и все. Еще пара небольших доработок, и получается что-то в этом роде:
Недостатки
Пока что работа с CSS-переменными шла достаточно гладко. Мне редко встречались ситуации, когда что-то не получалось. Приведу несколько возможностей, которые хотелось бы увидеть для CSS-переменных.
Заключение
Работать с CSS-переменными мне нравится. Чем больше я ими занимаюсь, тем больше примеров применения приходят в голову.
Благодаря этой статье вы сами можете начать изучать CSS-переменные.
Если вам интересно получить более подробный обзор CSS-переменных, посмотрите это видео.
Переменные в CSS
Переменные в CSS, или пользовательские свойства, имеют огромный потенциал для изменения кода и структуры CSS. Давайте рассмотрим стратегии получения максимальной пользы от переменных CSS.
Схожесть css-переменных с переменными в препроцессорах
В синтаксисе SASS (SCSS) мы используем символ доллара для обозначения переменной:
Для Less нужно использовать символ @ :
Однако, препроцессорные переменные имеют некоторые ограничения:
Поэтому стоит изучить, что такое переменные CSS, и затем использовать их в коде.
CSS-переменные имеют синтаксис, похожий на переменные в SASS или Less, и используют префикс в виде 2-х дефисов:
Значение свойства может быть любым допустимым значением CSS: цветом, строкой, значением макета, даже выражением.
Чтобы добавить использование переменной в код, необходимо записать так:
Еще несколько вариантов назначения css-переменных. Первый из них подразумевает использование глобальной видимости переменных, которые назначаются для :root :
Для использования CSS-переменных необходимо указать в соответствующем свойстве функцию var() с нужной переменной в скобках:
Вы можете объявлять переменные внутри любого элемента. Тогда они будут привязаны к этому элементу и его дочерним элементам. Использовать переменные можно следующим образом:
Результат работы переменной не виден:
На скриншоте видно, что в свойстве переменная выделена серым цветом. Это значит, что она не была найдена и использована браузером.
Особенности объявления css-переменных и их использования
Кроме того, вы можете повторно использовать другие переменные для объявления новых:
Рассмотрим пример, в котором мы можем изменить размер шрифта кнопок, исходя из одной переменной и используя функцию calc() для расчета других величин на основе нашей единственной переменной:
Попробуйте самостоятельно изменить шрифт, изменяя значения в CSS.
Области видимости и наследование
Прежде чем говорить о областях пользовательских свойств CSS, давайте вспомним области JavaScript и препроцессоры, чтобы лучше понять различия.
История с препроцессорами схожа. Давайте используем SASS в качестве примера, потому что это, вероятно, самый популярный препроцессор сегодня. С SASS мы имеем два типа переменных: локальные и глобальные.
Глобальная переменная может быть объявлена вне любого селектора или конструкции (например, как mixin). В противном случае переменная будет локальной.
Любые вложенные блоки кода могут обращаться к окружающим переменным (как в JavaScript).
Это означает, что в SASS области действия переменной полностью зависят от структуры кода.
Однако пользовательские свойства CSS наследуются по умолчанию, и, как и другие свойства CSS, они каскадные.
Динамическое изменение css-переменных
Давайте использовать наши знания синтаксиса и адаптировать пример SASS к HTML и CSS. Мы создадим демонстрационную версию, используя собственные пользовательские свойства CSS. Во-первых, HTML:
Переменные в CSS
Если вы разработчик, то вы точно хорошо знакомы с переменными, и возможно, они одни из ваших лучших друзей. По определению, переменная — это временное хранилище, которое содержит некое значение величины или информации.
Но каким образом это относится к тому CSS, который мы все знаем? Год назад на Хабре был пост о планируемых новшествах в CSS, которые были оглашены членом рабочей группы CSS и команды Google Chrome. Среди этих новшеств было введение поддержки переменных.
И вот, буквально на днях, поступили новости о выходе первого релиза рабочего черновика CSS Переменных (CSS Variables).
Почему CSS переменные?
Переменные в CSS — эта та штука, о которой народ спрашивал и хотел довольно долгое время.
Подумайте обо всех этих цветах (colors), высотах (heights), ширинах (widths) и размерах (sizes): как бы было прекрасно объявить их всего лишь один раз. И наконец, пришло время того, чего мы так долго ждали: писать меньше, но делать больше.
Установившиеся практики в CSS
Когда люди просят об объявлении переменных цвета в css (color), добавление комментариев в верней части CSS-файла было чем-то вроде симуляции поведения переменных:
Позже, чтобы обновить значения, приходилось делать поиск и замену.
Как это делается в LESS/Sass
Идея использовать переменные для таблицы стилей было одной из тех причин, по которым появились LESS и Sass.
Как это будет работать теперь
Любое имя свойства, начинающееся с префикса “var-” является свойством переменной. (Any property name starting with the prefix “var-” is a variable property)
Пример
Следующее правило декларирует имя свойства “var-header-color” для элемента root и присваивает для него значение “#99D1FF”:
Далее, его значение может передаваться с помощью переменной “header-color”:
Использование переменных цвета в определении градиентов также может быть очень полезным. Вам всего лишь нужно будет заменить значение переменных, и вуаля: все градиенты обновились. Звучит довольно круто, как по мне.
Также, при создании макета, применив переменные и функцию calc() можно сделать интересные вычисления.
Использование переменных в CSS
Experimental: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
CSS переменные подчиняются каскаду и наследуют значения от своих родителей.
Основное использование
Первый шаг с CSS Переменными
Начнём с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:
Мы применим его к этому HTML:
что приводит нас к этому:
Обратите внимание на повторения в CSS. Коричневый фон установлен в нескольких местах. Для некоторых CSS объявлений можно указать этот цвет выше в каскаде и наследование CSS решит эту проблему. Но для нетривиальных проектов это не всегда возможно. Объявив переменную в псевдоклассе :root, автор CSS может избежать ненужных повторений, используя эту переменную.
Наследование переменных в CSS и возвращаемые значения
Пользовательские свойства могут наследоваться. Это означает, что если не установлено никакого значения для пользовательского свойства на данном элементе, то используется свойство его родителя:
В результате var(—test) будет:
Используя var() вы можете объявить множество возвращаемых значений когда данная переменная не определена, это может быть полезно при работе с Custom Elements и Shadow DOM.
Первый аргумент функции это имя пользовательского свойства. Второй аргумент функции, если имеется, это возвращаемое значение, который используется в качестве замещающего значения, когда пользовательское свойство является не действительным. Например:
В замещаемых значениях можно использовать запятые по аналогии с пользовательскими свойствами. Например, var(—foo, red, blue) определить red, blue как замещающее значение (от первой запятой и до конца определения функции)
Данный метод также вызывает проблемы с производительностью. Он отображает страницу медленнее чем обычно, т.к. требует время на разбор.
Обоснованность и полезность
Понятие классической концепции CSS, связанность с каждым свойством, не очень удобно в плане пользовательских свойств. Когда значения пользовательских свойств обрабатываются, браузер не знает где они будут применяться, поэтому нужно учитывать почти все допустимые значения.