Хабрахабр

[Перевод] Краткое руководство по переменным в CSS (причины использования, синтаксис и примеры)

Если вы к ним еще не подступались, вы можете воспользоваться этим кратким руководством, чтобы быстро во всем сориентироваться и приступить к работе.
Я уже достаточно давно экспериментирую с CSS-переменными.

Что это такое?


Простой пример применения для кнопок с областью видимости

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

Недавно они стали набирать популярность в связи с более широкой поддержкой браузерами. Они появились уже достаточно давно.

Теперь можно делать все то же самое без препроцессора. Если вы пользуетесь препроцессором, например SASS, то с переменными вы уже знакомы.

Зачем использовать переменные стиля?

Переменные позволяют нам придерживаться принципа DRY (don't repeat yourself). Благодаря им у нас также появляется способ создать единую точку ссылки для повторяющихся значений. Если вы пользуетесь препроцессором, то, скорее всего, преимущества такого подхода вам уже знакомы. Чаще всего это используют, чтобы задать основной цвет, который используется для множества элементов.


Повтор фонового цвета для нескольких селекторов

Если из этого значения сделать переменную, у нас получится единая точка, на которую можно ссылаться. Во фрагменте выше значение #e74c3c могло бы и должно бы быть переменной. Это снижает риск появления багов и проблем со стилем, поскольку облегчает дальнейшее обслуживание.


Создание точки ссылки с помощью переменной

Во втором фрагменте я использую препроцессор, чтобы показать, как можно использовать переменную для значения background-color.

Почему бы не пользоваться переменными препроцессора вместо нативных CSS-переменных?

Хороший вопрос. В большинстве случаев вы предпочтете сохранить приверженность переменным препроцессора. Это так, если вы ими уже пользуетесь. Но можно применять преимущества обоих подходов сразу. Это становится актуально, когда возникает необходимость в полной мере задействовать возможности нативных CSS-переменных. Об этом позже.

Нативные CSS-переменные стоит применять когда:

  1. У вас нет препроцессора или вы им не пользуетесь.
  2. Вы хотите использовать преимущества нативных CSS-переменных.

Главные преимущества нативных CSS-переменных

На мой взгляд нативные CSS-переменные имеют два больших преимущества.

Они обновляются во время выполнения! Первое. Браузер применит внесенные изменения. Ими можно управлять с помощью медиазапросов, состояний или даже JavaScript. Это открывает много возможностей.

Это означает, что можно поменять, допустим, стиль или поведение элемента путем обновления значения переменной. Кроме того, CSS-переменные позволяют учитывать область видимости. В результате объем СSS на выходе уменьшается. В противном случае приходится с нуля прописывать новые стили для этого элемента.

Не самый красивый синтаксис

Давайте рассмотрим пример.

Все логично: это псевдоселектор корня дерева. Что из себя представляет псевдоселектор :root? В этом случае мы определяем значение rebeccapurple для переменной --primary. Селектор :root можно использовать для определения глобальных переменных.

Чтобы определить переменную, в качестве префикса используется два дефиса.

Чтобы использовать переменную нам потребуется функция var.

В этом случае можно задать резервные значения или значения по умолчанию. А что происходит, когда мы ссылаемся на переменную, значение которой не задано? Функция var поддерживает второй необязательный параметр, соответствующий резервным значениям или значениям по умолчанию.

Где возможно для background-color применяется значение --btn-color. В этом фрагменте задается исходный стиль для тега button. Если переменная не существует или значение не задано, используется значение --primary.

Можно взять значение. Нет необходимости использовать переменную для нашего фолбека. Но с переменными будет проще осуществлять поддержку кода.

Вместо этого обновляется значение. Обратите внимание, что для button.btn никаких стилей не объявлено. Теперь уместно перейти к каскадированию и областям видимости.

Каскадирование и области видимости

При работе с переменными учитывается каскадирование, а также область видимости переменных. Во предыдущем примере переменные объявляются в псевдоклассе :root. Все переменные в селекторе :root имеют глобальную область видимости.

Благодаря области видимости это значение можно переопределить. В одном из примеров выше --primary был доступен для всех селекторов. Например, нам нужно, чтобы значение --primary менялось для класса premium.

То есть, если для button не применяется никакой класс, значение переменной — rebeccapurple. В этом фрагменте значение переменной --primary элемента класса premium равно dodgerblue. Однако, если применить класс premium, цвет поменяется на dodgerblue.

Стоит отметить, что, как и в случае со встроенными стилями, встроенные CSS-переменные имеют наивысший приоритет.

Это происходит, потому что значение --primary описано непосредственно в теге. В этом фрагменте фоновый цвет кнопки будет иметь значение red, несмотря на то, что здесь применяется класс premium.

Управление значениями

Управлять значениями CSS-переменных можно с помощью других CSS-правил. Основные подходы — медиазапросы и изменения состояния.

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

Изменение запустит перерисовку браузера и покажет результат пользователю.

В этом случае градиент фона поменяется, если ширина превысит 768px.

Например, возьмем button. А как управлять переменными с помощью состояний? CSS-переменная будет обновляться исходя из состояния button.

В этом случае можно настраивать стиль кнопки исходя из состояния :active.

Управление значениями с помощью JavaScript

Управлять переменными из СSS очень удобно. Но чтобы по-настоящему получить контроль над ними, придется управлять ими посредством JavaScript. К счастью, это реально.

Метод setProperty позволяет задавать переменные стиля элемента и управлять ими.

Хороший вопрос. Как обновить переменную, заданную в псевдоклассе :root? Потребуется задать свойства документов documentElement.

Любопытно отслеживать положение курсора с помощью события mousemove. Когда можно управлять CSS-переменными таким образом, открывается много возможностей.

Использование calc() и отказ от единиц измерения

Постарайтесь не использовать единиц измерения в переменных. Это облегчит дальнейшее обслуживание.

Функция calc() позволяет нормализовать и задавать значения с желаемыми единицами измерения.

Во фрагменте для наглядности мы взяли «1px», но можно заменить это на «1pt», «1rem» и т.д. CSS-переменные можно даже использовать для хранения информации о предпочитаемых единицах измерения.

При обработке чистых значений наш скрипт абстрагируется от CSS. Отсутствие единиц измерения, как правило, более актуально, когда значения задаются из JavaScript. Нарушается связь.

Когда единицы измерения содержатся в CSS, обслуживание тоже проходит через CSS.

Примеры применения

Я все еще изучаю различные примеры применения CSS-переменных. В первую очередь в голову приходит динамическая темизация. Отслеживание курсора и прокрутки экрана — тоже любопытные применения. Я подготовил обучающие материалы, которые можно найти ниже.

Пример с собакой и мячиком

Давайте один пример проработаем вместе!

Здесь мы просто отслеживаем положение курсора и обновляем положение двух эмодзи.

Главное здесь — перенести эмодзи из центральной точки с помощью translate и одновременно применить transition-delay для собаки.

С помощью переменных для --x и --y. Как обновить положение?

Применяется transition-delay. Как сделать так, чтобы собака отставала? Непростого эффекта замедления можно также добиться с помощью transition-timing-function.

Остается лишь обновить эти переменные для mousemove.

Еще пара небольших доработок, и получается что-то в этом роде: Вот и все.

Недостатки

Пока что работа с CSS-переменными шла достаточно гладко. Мне редко встречались ситуации, когда что-то не получалось. Приведу несколько возможностей, которые хотелось бы увидеть для CSS-переменных.

  1. Анимация переменных. В этой статье я совсем не говорил про анимацию. Для нее можно использовать переменные. Но анимацию самих значений сделать не получится.
  2. В селекторах CSS-переменные использовать нельзя. Это логично, но было бы здорово, если такой уровень интерполяции был бы доступен. Использовать переменные в селекторе nth-child было бы круто.

Заключение

Работать с CSS-переменными мне нравится. Чем больше я ими занимаюсь, тем больше примеров применения приходят в голову.

Благодаря этой статье вы сами можете начать изучать CSS-переменные.

Если вам интересно получить более подробный обзор CSS-переменных, посмотрите это видео.

LOOKING.HOUSE — на проекте собрано более 150 точек looking glass в 40 странах. Можно быстро выполнить команды host, ping, traceroute и mtr.

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть