Краткое введение в переменные CSS

Переменные в чистом 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:

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