Переменные CSS
Поиск

Переменные CSS

Nikel, 20.05.2019

Переменные CSS

Если вы использовали препроцессорные языки, то уже сталкивались с понятием переменная. Долгое время нативному CSS очень не хватало такой возможности, и любое свойство нужно было каждый раз писать в коде. Это делало CSS довольно громоздким, и даже группировка стилей не спасала. То ли дело в каком-нибудь LESS достаточно было один раз объявить переменную и использовать ее далее везде. Такой метод значительно проще, однако не будем забывать, что недостатком препроцессорных языков всегда была невозможность работы по умолчанию, необходимость компиляции. То есть как мы видим недостатки были и в том, и в другом случае.

Чтобы решить эту проблему и были придуманы  переменные для стилей. Эта фишка появилась еще в 2012 году (именно тогда вышел первый рабочий черновик W3C), но тогда поддержка браузерами практически отсутствовала, что по сути делало ее бесполезной. Сейчас, по прошествии времени ситуация с кроссбраузерностью значительно улучшилась.Согласно сервису CanIUse, переменные (CSS vairiables или, как их еще называют custom properties — пользовательские свойства) поддерживаются основными браузерами: Edge, Firefox, Chrome, поэтому их вполне можно использовать в реальных проектах. Давайте же рассмотрим поподробнее, что они из себя представляют и как их можно применить в стилях.

Что такое переменные CSS?

Само понятие переменной пришло к нам из языков программирования, и обозначает оно некоторые «ячейки», в которых хранятся определенные значения. В случае с CSS это будут значения каких-либо свойств, которые мы указали: цвета, фона, размера шрифта и размеров разных элементов. Поскольку «ячейка» постоянно хранит то, что для нее задали пока не будет переопределена, ее можно потом применять на протяжении всего файла CSS. Собственно, в этом и заключены основная цель и преимущество нативных переменных стилей. И благодаря этому мы можем добиться сокращения количества написанного кода.

Как использовать переменные?

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

Оказывается, всё довольно просто. Переменные нужно объявлять внутри селекторов, при этом они выглядят практически как обычные свойства, за исключением двух дефисов перед именем. Именно так мы указываем, что речь идет о переменной, значение которой нужно запомнить. В примере ниже наша переменная bg принимает значение lightblue.

Если же мы хотим присвоить переменную какому-либо свойству, нужно просто вызвать ее внутри функции var() там, где нужно указать значение свойства (мы присвоили значение --bgd цвету фона в селекторе div, теперь фон всех дивов будет светло-голубой, а абзацу мы присвоили цвет фона --bgp и элементы p будут светло-зеленого цвета).

Объявлять CSS variables вы можете внутри абсолютно любого правила, это не принципиально. Для удобства некоторые рекомендуют определять их в начале таблицы стилей (чтобы легче было найти в коде) в псевдоклассе :root, относящемуся к корневому элементу документа (html). С таким же успехом можно использовать и простой селектор html, правда приоритет в стилях у  :root будет всё-таки выше.

Наследование

Обратите внимание на такую важную вещь как наследование. Переменные объявленные в родительских элементах наследуются дочерними. Если переменная объявлена, но вызвана потом в элементе который ее не наследует, то там она не сработает. Можно привести такой пример. У нас два абзаца p, один внутри элемента section, другой сам по себе. Мы определим две переменные --f-size и --f-color соответственно в body и в селекторе section, а потом вызовем их для элементов p. В результате оба абзаца получат шрифт 20px, но в зеленый покрасится только тот, который дочерний по отношению к section.

See the Pen
BeXEyb
by Elena (@Lliana)
on CodePen.

Какой из этого можно сделать вывод? Когда вы не уверены насчет того, как будет наследоваться свойство, определяйте CSS variables в правилах для корневых элементов (:root, html).

Переопределение

Еще одна важная особенность, о которой нельзя упомянуть —  возможность переопределения переменной. В любой момент вы можете изменить ее значение, это очень легко. Рассмотрим похожий простой пример, по-прежнему у нас два абзаца, один из которых внутри section. Для body указана переменная --f-color с зеленым цветом, в section мы переопределили ее и сделали с красным цветом, поэтому его дочерний элемент span стал красным, а абзац, который дочерний непосредственно для body остался зеленым.

See the Pen
qGewYK
by Elena (@Lliana)
on CodePen.

Какая практическая польза от переопределений? Один из возможных вариантов —  использовать их для медиазапросов. Предположим, что при большой ширине экрана нам нужно для каких-то свойств присваивать переменную с одним значением, а при маленькой — с другим. Тогда в медиазапросе мы переопределяем переменную как и в предыдущем случае.

Переменные в переменных

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

С какой целью это используется? В основном чтобы было наглядно. Таким образом можно указать все цвета, которые будут использоваться на сайте с осмысленными названиями, а потом применять их далее в разных стилях. Определить переменную с  цветом magenta и для фона, и для цвета заголовка, к примеру, поскольку это понятнее чем шестнадцатеричный код.

Резервные значения

Функция var() может принимать два значения. Второе значение обычно опускают, но оно может иногда использоваться для того, чтобы избежать ошибки в случае, когда переменная не определена. Такое может случиться, например, когда мы получаем значение переменной динамически(с помощью JavaScript).

Второе значение можно указать в виде определенного параметра(в зависимости от свойства, например, код цвета, число) или даже другой переменной. Ниже приведены варианты, когда резервный  цвета фона серебристый и когда используется другая переменная —other-bg-color, объявленная зараннее.

Функция calc()

Статья про функцию calc() недавно выходила на блоге. Оказывается на этом возможности этой замечательной математической функции не исчерпываются — она может работать вместе с переменными.

Пусть мы каким-то образом получаем общую ширину страницы и заносим в переменную —main-width(она равна 1000px). Благодаря calc() мы вычисляем ширину блока контента которая равна общей ширине за исключением ширины бокового сайдбара (равного 150px).

В переменной уже должны содержаться единицы измерения (пиксели там или проценты), чтобы все вычислялось правильно. Если переменная по каким-то причинам содержит только число, существует способ  легко привести ее к нужным единицам, умножив на 1px или 1% и т.д.