Как воспользоваться переменную в CSS?

1.3 Junior🔥 121 комментариев

#HTML и CSS

Комментарии (1)

🐱

claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Как использовать переменные в CSS (CSS Custom Properties)

CSS переменные (или CSS Custom Properties) - это именованные значения, которые можно определить один раз и переиспользовать множество раз в таблице стилей. Это мощный инструмент для создания масштабируемых и поддерживаемых таблиц стилей.

Базовая синтаксис

Объявление переменной:

:root {
  /* Переменные в :root доступны повсюду */
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --spacing-unit: 8px;
  --border-radius: 4px;
  --font-family: 'Inter', sans-serif;
  --transition-speed: 0.3s;
}

Использование переменной:

button {
  background-color: var(--primary-color);  /* Используй переменную */
  padding: calc(var(--spacing-unit) * 2);  /* Можно вычислять */
  border-radius: var(--border-radius);
  font-family: var(--font-family);
  transition: all var(--transition-speed) ease;
}

Синтаксис функции var():

var(--variable-name);
var(--variable-name, fallback-value);  /* С резервным значением */

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

1. Глобальные переменные (:root)

:root {
  /* Доступна всем элементам на странице */
  --primary-color: #007bff;
}

p { color: var(--primary-color); } /* работает */
span { color: var(--primary-color); } /* работает */

2. Локальные переменные (область селектора)

.card {
  /* Доступна только внутри .card и её потомков */
  --card-bg: white;
  --card-padding: 16px;
  
  background-color: var(--card-bg);
  padding: var(--card-padding);
}

.card__header {
  /* Может использовать переменные родителя */
  background-color: var(--card-bg);
  padding: var(--card-padding);
}

p {
  /* НЕ может использовать --card-bg, т.к. не потомок .card */
  color: var(--card-bg); /* не будет работать */
}

3. Переменные в разных контекстах

:root {
  --color: black; /* по умолчанию */
}

body.dark-mode {
  --color: white;  /* переопределяем для тёмной темы */
}

p { color: var(--color); } /* Адаптивно к теме! */

Практические примеры

Пример 1: Проектирование системы цветов

:root {
  /* Основные цвета */
  --color-primary: #007bff;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;

  /* Оттенки для интерактивности */
  --color-primary-light: #e7f3ff;
  --color-primary-dark: #004494;

  /* Нейтральные цвета */
  --color-text: #333;
  --color-text-light: #666;
  --color-bg: #fff;
  --color-border: #ddd;
}

button.btn-primary {
  background-color: var(--color-primary);
  color: white;
}

button.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

.alert-success {
  background-color: var(--color-success);
  color: white;
}

Пример 2: Система интервалов (спейсинг)

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
}

.container {
  padding: var(--space-lg);
  margin: var(--space-xl) auto;
}

.button {
  padding: var(--space-sm) var(--space-md);
  margin-right: var(--space-sm);
}

.heading {
  margin-bottom: var(--space-md);
}

Пример 3: Типография

:root {
  /* Размеры */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;

  /* Высота строки */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Вес шрифта */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

h1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

Пример 4: Адаптивный дизайн (разные переменные для разных экранов)

:root {
  --spacing: 16px;
  --font-size-heading: 32px;
  --container-width: 1200px;
}

/* На мобильных */
@media (max-width: 768px) {
  :root {
    --spacing: 12px;
    --font-size-heading: 24px;
    --container-width: 100%;
  }
}

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

h1 {
  font-size: var(--font-size-heading);
}

Функция calc() с переменными

:root {
  --base-unit: 8px;
  --spacing: calc(var(--base-unit) * 2);      /* 16px */
  --large-spacing: calc(var(--spacing) * 2);  /* 32px */
}

.box {
  width: calc(100% - var(--spacing) * 2);
  padding: var(--spacing);
  margin: calc(var(--spacing) / 2);
}

Резервные значения (Fallback)

/* Если --primary-color не определена, использует #007bff */
button {
  background-color: var(--primary-color, #007bff);
}

/* Многоуровневые резервные значения */
body {
  color: var(--text-color, var(--fallback-text, #333));
}

Изменение переменных с JavaScript

// Получить значение переменной
const primaryColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary-color'); // ' #007bff'

// Установить новое значение переменной (на :root)
document.documentElement.style.setProperty('--primary-color', '#ff0000');

// Установить для конкретного элемента
const element = document.querySelector('.card');
element.style.setProperty('--card-bg', 'lightgray');

// Удалить переменную (вернет к родительскому значению)
element.style.removeProperty('--card-bg');

Практический пример: Переключение темы

HTML:

<button id="theme-toggle">Toggle Dark Mode</button>
<body id="app">
  <h1>Hello World</h1>
  <p>Lorem ipsum</p>
</body>

CSS:

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --border-color: #cccccc;
}

body.dark-mode {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
  --border-color: #333333;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: all 0.3s ease;
}

h1, p {
  color: var(--text-color);
}

JavaScript:

const toggle = document.getElementById('theme-toggle');
const app = document.getElementById('app');

toggle.addEventListener('click', () => {
  app.classList.toggle('dark-mode');
  
  // Сохраняем предпочтение
  const isDark = app.classList.contains('dark-mode');
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

// Загружаем сохранённую тему
if (localStorage.getItem('theme') === 'dark') {
  app.classList.add('dark-mode');
}

Взаимодействие с препроцессорами (SCSS/Less)

CSS переменные vs SCSS переменные:

// SCSS переменная (компилируется в значение)
$primary: #007bff;
button {
  background: $primary; // Компилируется в #007bff
}

// CSS переменная (вычисляется в браузере)
:root {
  --primary: #007bff;
}
button {
  background: var(--primary); // Может быть переопределена в JS!
}

Используй оба вместе:

:root {
  --primary-color: #{$primary}; /* Используй SCSS значение */
  --spacing-unit: #{$spacing};
}

Совместимость браузеров

CSS переменные поддерживаются всеми современными браузерами:

Chrome 49+
Firefox 31+
Safari 9.1+
Edge 15+
НЕ поддерживается в IE 11

Для IE 11 используй полифилл:

<script src="https://unpkg.com/css-variables-polyfill@2"></script>

Лучшие практики

Объявляй переменные на :root для глобального использования
```
:root { --primary: #007bff; }
```

Используй описательные имена

--primary-color /* хорошо */
--pc /* плохо */

Группируй переменные по категориям

:root {
  /* Colors */
  --color-primary: ...
  
  /* Spacing */
  --space-sm: ...
}

Используй для динамических значений в JS
```
document.documentElement.style.setProperty('--dynamic', value);
```
Комбинируй с calc() для адаптивности
```
--size: calc(var(--base) * 2);
```

Итог

CSS переменные - это неотъемлемая часть современной фронтенд разработки:

Определяй один раз, переиспользуй везде
Легко менять значения в JavaScript
Идеально для систем дизайна и тем
Поддерживаются всеми браузерами (кроме IE)
Работают вместе с препроцессорами

Синтаксис: var(--name, fallback) - просто и эффективно.