CSS переменные

В последние несколько лет CSS препроцессоры имели большой успех. Проекты с нуля очень часто начинались с Less или Sass. И это все еще очень популярная технология.

Основными преимуществами этих технологий, на мой взгляд, то, что:

  • Они позволяют вкладывать селекторы
  • Обеспечивают легкую функциональность импорта
  • Они дают вам переменные

В данный момент в современном CSS вы уже можете использовать пользовательские параметры CSS или переменные CSS.

CSS не является языком программирования, таким как JavaScript, Python, PHP, Ruby или Go, где переменные являются ключевыми вещами. CSS очень ограничен в том, что он может делать, и это в основном декларативный синтаксис, чтобы сообщить браузерам, как они должны отображать HTML-страницу.

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

И он представляет уникальную функцию, которой у CSS-препроцессоров никогда не будет: ** вы можете программно получить доступ к значению переменной CSS и изменить его с помощью JavaScript **.

Основы использования переменных

Переменная CSS определяется со специальным синтаксисом, добавляя две черты к имени (--variable-name), затем двоеточие и значение. Как это:

:root {
  --primary-color: yellow;
}

(подробнее о : root позже)

Вы можете получить доступ к значению переменной, используя var ():

p {
  color: var(--primary-color)
}

Значением переменной может быть любое допустимое значение CSS, например:

:root {
  --default-padding: 30px 30px 20px 20px;
  --default-color: red;
  --default-background: #fff;
}

Создание переменных внутри любого элемента

Переменные CSS могут быть определены внутри любого элемента. Некоторые примеры:

:root {
  --default-color: red;
}

body {
  --default-color: red;
}

main {
  --default-color: red;
}

p {
  --default-color: red;
}

span {
  --default-color: red;
}

a:hover {
  --default-color: red;
}

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

Область действия переменных

Добавление переменных в селектор делает их доступными для всех его потомков.

В приведенном выше примере вы видели использование : root при определении переменной CSS:

:root {
  --primary-color: yellow;
}

:root является псевдоклассом CSS, который идентифицирует документ, поэтому добавление переменной в : root делает ее доступной для всех элементов на странице.

Это похоже на нацеленность на элемент html, за исключением того, что: root обладает большей специфичностью (имеет приоритет).

Если вы добавите переменную в селектор .container, она будет доступна только потомкам.container:

.container {
  --secondary-color: yellow;
}

и использование его вне этого элемента не сработает.

Переменные могут быть переопределены:

:root {
  --primary-color: yellow;
}

.container {
  --primary-color: blue;
}

За пределами .container, primary-color будет yellow, но внутри будет blue.

Вы также можете назначить или перезаписать переменную внутри HTML, используя встроенные стили:

<main style="--primary-color: orange;">
  <!-- ... -->
</main>

Переменные CSS следуют обычным правилам каскадирования CSS с приоритетом, установленным в соответствии со спецификой

Взаимодействие со значением переменной CSS с использованием JavaScript

Самая крутая вещь с CSS-переменными - это возможность доступа и редактирования их с помощью JavaScript.

Вот как вы устанавливаете значение переменной, используя простой JavaScript:

const element = document.getElementById('my-element')
element.style.setProperty('--variable-name', 'a-value')

Код ниже может использоваться для доступа к значению переменной вместо этого, если переменная определена в : root:

const styles = getComputedStyle(document.documentElement)
const value = String(styles.getPropertyValue('--variable-name')).trim()

Или, чтобы применить стиль к определенному элементу, в случае переменных, установленных с другой областью действия:

const element = document.getElementById('my-element')
const styles = getComputedStyle(element)
const value = String(styles.getPropertyValue('--variable-name')).trim()

Обработка недопустимых значений

Если переменная присваивается свойству, которое не принимает значение переменной, оно считается недействительным.

Например, вы можете передать значение пикселя в свойство position или значение rem в свойство color.

В этом случае строка считается недействительной и игнорируется.

Поддержка браузеров

Поддержка браузером переменных CSS очень хорошая, в соответствии с Caniuse.

Вы можете использовать Переменные CSS сегодня, если вам не требуется поддержка Internet Explorer и старых версий других браузеров.

Если вам требуется поддержка старых браузеров, вы можете использовать библиотеки, такие как PostCSS или Myth, но вместе с этим вы потеряете способность взаимодействовать с переменными через JavaScript или Инструменты разработчика браузера, так как они переносятся в старый добрый CSS без переменных (и, таким образом, вы теряете большую часть силы CSS-переменных).

Переменные CSS чувствительны к регистру

Эта переменная:

--width: 100px;

отличается от:

--Width: 100px;

Математика в переменных CSS

Чтобы использовать математику в CSS-переменных, вам нужно использовать calc(), например:

:root {
  --default-left-padding: calc(10px * 2);
}

Медиа-запросы с переменными CSS

Здесь нет ничего особенного. Переменные CSS обычно применяются к медиа-запросам:

body {
  --width: 500px;
}

@media screen and (max-width: 1000px) and (min-width: 700px) {
  --width: 800px;
}

.container {
  width: var(--width);
}

Установка значения по-умолчанию для var()

var() принимает второй параметр, который является значением по-умолчанию, когда значение переменной не установлено:

.container {
  margin: var(--default-margin, 30px);
}