CSS перекрывающие переменные

Заменить глобальные переменные локальными переменными

Из предыдущей страницы мы знаем, что переменные глобального уровня можно использовать/доступны в всего документа, в то время как локальные переменные могут использоваться только в селекторе, в котором они были заявлены.

Смотрите пример на предыдущей странице:

Пример

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Попробуйте сами

Иногда, мы хотим, чтобы переменные изменялись только в определенной части страницы.

Предположим, что мы хотим, чтобы у элемента button был другой цвет синего. Тогда, мы можем заново声明 переменную --blue в селекторе button. Когда мы используем var(--blue) в этом селекторе, он будет использовать значение локальной переменной --blue,声明于此.

Мы видим, что локальная переменная --blue перекрывает глобальную переменную --blue элемента button:

Пример

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  --blue: #0000ff;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Попробуйте сами

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

Если переменная используется только в одном месте, мы также можем声明一个新的 локальную переменную, как это:

Пример

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  --button-blue: #0000ff;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}

Попробуйте сами

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

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Функция
var() 49.0 15.0 31.0 9.1 36.0

Функция CSS var()

Функция Описание
var() Вставьте значение CSS переменной.