CSS переменные (пользовательские CSS-свойства) за 5 минут

CSS переменные или по-другому пользовательские CSS-свойства — это невероятная победа в сфере frontend разработки. Они позволяют писать меньше кода, избегать повторений и улучшают читаемость кода.

Причем, в отличии от переменных в препроцессорах, CSS переменные являются частью DOM. А это значит, что их значение можно менять в зависимости от условий, и даже влиять на них с помощью Javascript. По сути, CSS переменные — это переменные на LESS и SASS на стероидах.

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

Существует несколько причин что бы использовать CSS переменные. Самой важной из них является то, что они уменьшают количество повторений в вашей таблице стилей.

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

Такой вариант не только облегчит чтение вашего кода, но и даст вам больше возможностей, если вы захотите изменить этот цвет.

С одной стороны то же самое дают нам и переменные в препроцессорах SASS или LESS. Но у нативных CSS переменных есть несколько преимуществ.

  1. Они не требуют никакой транспиляции для работы, поскольку они нативны для браузера. А значит вам не нужно никаких дополнительных действий что бы начать ими пользоваться.
  2. Они являются частью DOM, а это открывает ряд некоторых возможностей, о которых ниже.

Объявление вашей первой переменной

Для того что бы объявить CSS переменную, необходимо выбрать области видимости для неё. Если вам необходимо что бы переменная использовалась во всем документе, достаточно объявить её в псевдо-классе :root .

Как видите в этом нет ничего сложного, CSS переменная объявляется так же, как и любое другое CSS свойство, но важно помнить, что начинаться она должна с двойного тире.

Для доступа к переменной необходимо использовать функцию var() и имя переменной в качестве аргумента.

Объявление локальной переменной

Естественно CSS переменные можно объявлять не только для всего документа, но и для элемента и его дочерних элементов.

Если вы попытаетесь использовать переменную — alert-color где-то вне контекста элемента, то она не будет работать.

Адаптивный дизайн с помощью CSS переменных

Одним из самых важных и неоспоримых преимуществ CSS переменных это возможность использовать их в адаптивном дизайне. В зависимости от media-выражений вы можете менять их так как сами того захотите.

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

Управление CSS переменными с помощью JavaScript

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

Что бы обновить значение переменной, Вам необходимо использовать метод setProperty на элементе в котором была объявлена CSS переменная.

Например, это очень сильно поможет при создании ночной темы для сайта.

Поддержка браузерами

С поддержкой все супер, 77% покрытия браузеров. Очень огорчает IE11. Но для него можно использовать полифилл.

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

Frontend Разработчик в компании Webit.ru

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store