Краткое введение в переменные CSS
Development | Комментировать запись
Переменные в чистом CSS (без какого-либо препроцессора) сегодня поддерживаются большинством современных браузеров. Официально они называются пользовательскими свойствами. Они позволяют избежать большого количества повторений, связанных с традиционным синтаксисом CSS, и, в отличие от переменных с препроцессорами, их можно изменять динамически.
Вот как вы можете использовать пользовательские CSS-свойства:
/* Declaration */ some-element { --my-bg-color: #F9EC31; } /* Using it */ some-element { background-color: var(--my-bg-color); }
Также при написании переменной можно указать запасное значение, которое будет использоваться, если переменная не была определена:
some-element { background-color: var(--my-bg-color, papayawhip); }
Псевдокласс :root и переменные
Вот типичный вариант использования: определить переменные в псевдоклассе :root, а затем применить его везде, где необходимо данное значение. Например:
:root { --funky-shadow: 3px 3px 10px brown; } .ugly-box { box-shadow: var(--funky-shadow); }
Функция calc()
Также вы можете использовать функцию calc() со значениями переменных.
:root { --special-padding: 1.5em; } .pandora-box { padding-bottom: calc(var(--special-padding) + 1em); }
Браузерная поддержка
Myth – хороший вариант начать использовать переменные CSS уже сегодня.
Данные о поддержке функции css-переменных основными браузерами вы можете найти здесь.
Читайте также: Управление размерами изображений в CSS
Tags: CSS