Переменные в CSS

Переменные CSS

Вставка значения CSS-переменной — задача функции var().

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

Цвета вашего дизайна отлично подходят для этого. Поместите каждый цвет в переменную один раз, а не копируйте и вставляйте его снова и снова.

CSS — объявление переменной

CSS-переменная имеет глобальную или локальную область видимости.

Глобальная переменная доступна из любого места документа, а локальная работает только внутри селектора, в котором она объявлена.

Для глобальной области видимости поместите объявление внутрь селектора :root, который соответствует корневому элементу документа.

Для локальной области видимости поместите его внутрь селектора, который будет её использовать.

Имена всегда начинаются с двух дефисов (--), а прописные и строчные буквы считаются разными!

Синтаксис объявления переменной

Блок :root содержит глобальную переменную, а конкретный селектор — локальную.

:root {
  --primary-bg-color: green; /* global scope */
}

.note {
  --note-bg: yellow; /* local scope */
}

Функция CSS var()

После объявления CSS-переменной var() вставляет её значение.

Возможны два аргумента: имя переменной, которое обязательно и начинается с двух дефисов, и запасное значение, которое необязательно и используется, если переменную не удаётся найти.

Работа с var() даёт такие преимущества:

Поддержка становится проще, так как обновления выполняются легче
Код читается яснее и становится понятнее
Цветовые значения на всей странице легче изменять

Синтаксис var()

Как записывается var(): name указывать обязательно, а value — необязательное запасное значение.

var(--name, value)

Пример CSS-переменных

Сначала объявляются две глобальные переменные, --primary-bg-color и --primary-color. Ниже в таблице стилей var() подставляет их значения.

Переменные синей темы

Здесь две глобальные CSS-переменные содержат синий и белый цвета, а var() передаёт эти значения элементам body, контейнера, заголовка и заметки.

Создайте страницу, объявляющую две глобальные CSS-переменные (--primary-bg-color как #1e90ff и --primary-color как #ffffff) в :root. Используйте их с var() для стилизации фона body, контейнера с цветом текста, фоном, отступом, h2 с нижней границей и div заметки с границей и отступом.

> Output: complete HTML page

Prompt

Создайте страницу, объявляющую две глобальные CSS-переменные (--primary-bg-color как #1e90ff и --primary-color как #ffffff) в :root. Используйте их с var() для стилизации фона body, контейнера с цветом текста, фоном, отступом, h2 с нижней границей и div заметки с границей и отступом.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Variables - Blue Theme</title>
<style>
:root {
  --primary-bg-color: #1e90ff;
  --primary-color: #ffffff;
}

body {
  background-color: var(--primary-bg-color);
  font-family: Arial, sans-serif;
}

.container {
  color: var(--primary-bg-color);
  background-color: var(--primary-color);
  padding: 15px;
}

.container h2 {
  border-bottom: 2px solid var(--primary-bg-color);
}

.container .note {
  border: 1px solid var(--primary-bg-color);
  padding: 10px;
}
</style>
</head>
<body>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <div class="note">
    <p><strong>Note:</strong> This is a note about something important.</p>
  </div>
  <p>This is some more text inside the container.</p>
</div>

</body>
</html>

Переменные зелёной темы

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

Создайте страницу, объявляющую две глобальные CSS-переменные (--primary-bg-color как #8FBC8F и --primary-color как #FFFAF0) в :root. Используйте их с var() для стилизации фона body, контейнера с цветом текста, фоном, отступом, h2 с нижней границей и div заметки с границей и отступом. Это демонстрирует, как изменение значений переменных меняет весь внешний вид.

> Output: complete HTML page

Prompt

Создайте страницу, объявляющую две глобальные CSS-переменные (--primary-bg-color как #8FBC8F и --primary-color как #FFFAF0) в :root. Используйте их с var() для стилизации фона body, контейнера с цветом текста, фоном, отступом, h2 с нижней границей и div заметки с границей и отступом. Это демонстрирует, как изменение значений переменных меняет весь внешний вид.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Variables - Green Theme</title>
<style>
:root {
  --primary-bg-color: #8FBC8F;
  --primary-color: #FFFAF0;
}

body {
  background-color: var(--primary-bg-color);
  font-family: Arial, sans-serif;
}

.container {
  color: var(--primary-bg-color);
  background-color: var(--primary-color);
  padding: 15px;
}

.container h2 {
  border-bottom: 2px solid var(--primary-bg-color);
}

.container .note {
  border: 1px solid var(--primary-bg-color);
  padding: 10px;
}
</style>
</head>
<body>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <div class="note">
    <p><strong>Note:</strong> This is a note about something important.</p>
  </div>
  <p>This is some more text inside the container.</p>
</div>

</body>
</html>

Функция CSS var()

Чтобы вставить значение CSS-переменной, вызовите var().