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

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

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

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

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

Стандартный вариант написания кода

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

Новый вариант написания кода

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

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

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

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

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

:root {  
--main-color: #ff6f69;
}

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

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

.title {  
color: var(--main-color);
}

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

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

.alert {  
--alert-color: #ff6f69;
}
.alert p {
color: var(--alert-color);
border: 1px solid var(--alert-color);
}

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

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

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

:root {  
--main-font-size: 16px;
}

media all and (max-width: 600px) {
:root {
--main-font-size: 12px;
}
}

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

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

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

var root = document.querySelector(':root');  
var rootStyles = getComputedStyle(root);
var mainColor = rootStyles.getPropertyValue('--main-color');

console.log(mainColor);

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

root.style.setProperty('--main-color', '#88d8b0')

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

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

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

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

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

Владимир Бандуристов

Written by

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade