В чём разница между переменными в CSS и в препроцессорах?

CSS переменные vs Переменные в препроцессорах

Это важная тема для понимания современного CSS. Давай разберемся, чем отличаются встроенные CSS переменные от переменных в Sass/Less.

CSS Custom Properties (встроенные переменные)

CSS Custom Properties — это встроенная поддержка переменных в CSS (живые переменные):

/* Определение */
:root {
  --primary-color: #3498db;
  --spacing-unit: 8px;
  --border-radius: 4px;
}

/* Использование */
body {
  color: var(--primary-color);
  padding: var(--spacing-unit);
  border-radius: var(--border-radius);
}

Ключевые особенности CSS переменных:

1. Динамические (меняются во время выполнения)
2. Работают в браузере (не в процессе сборки)
3. Имеют область видимости (как обычные переменные в программировании)
4. Можно менять через JavaScript

Препроцессоры: Sass, Less, Stylus

Sass переменные — это статические переменные, которые обрабатываются во время компиляции:

// Определение
$primary-color: #3498db;
$spacing-unit: 8px;
$border-radius: 4px;

// Использование
body {
  color: $primary-color;
  padding: $spacing-unit;
  border-radius: $border-radius;
}

// Компилируется в
body {
  color: #3498db;
  padding: 8px;
  border-radius: 4px;
}
// Переменные НЕ попадают в CSS!

Главные различия

CSS Custom Properties: динамичность

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

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

/* Можно менять в зависимости от состояния */
body.dark-mode {
  --primary-color: #1a1a1a;
}

body.light-mode {
  --primary-color: white;
}

Меняем через JavaScript:

// Получить значение
const color = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary-color');

// Изменить значение
document.documentElement.style.setProperty('--primary-color', '#ff0000');

// Теперь все элементы, использующие var(--primary-color), обновятся!
// Ничего перекомпилировать не нужно!

Sass: логика и функции

$base-spacing: 8px;
$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

// Функции
@function spacing($multiplier) {
  @return $base-spacing * $multiplier;
}

// Миксины
@mixin button-styles($color) {
  background-color: map-get($colors, $color);
  padding: spacing(2);
  border-radius: 4px;
}

// Использование
button.primary {
  @include button-styles(primary);
}

// Компилируется в
button.primary {
  background-color: #3498db;
  padding: 16px;  /* 8px * 2 */
  border-radius: 4px;
}

Практический пример: тёмный режим

Способ 1: CSS Custom Properties (правильный)

<button onclick="toggleDarkMode()">Toggle Dark Mode</button>

:root {
  --bg-color: white;
  --text-color: black;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

body.dark-mode {
  --bg-color: #1a1a1a;
  --text-color: white;
}

function toggleDarkMode() {
  document.body.classList.toggle('dark-mode');
  // Всё обновляется мгновенно, без перезагрузки!
}

Способ 2: Sass переменные (неправильный для темизации)

// variables.light.scss
$bg-color: white;
$text-color: black;

// variables.dark.scss
$bg-color: #1a1a1a;
$text-color: white;

// styles.scss
body {
  background-color: $bg-color;
  color: $text-color;
}

// Нужно переcompilировать весь CSS для разных тем!
// styles-light.css + styles-dark.css

Область видимости

CSS Custom Properties: динамическая область видимости

:root {
  --color: blue;
}

body {
  --color: red; /* Переопределение */
}

body > div {
  color: var(--color); /* red - наследуется из body */
}

.special {
  --color: green; /* Локальное переопределение */
  color: var(--color); /* green */
}

Sass переменные: статическая область видимости

$color: blue;

body {
  $color: red; /* Переопределение ТОЛЬКО внутри блока */
  color: $color; /* red */
}

body > div {
  color: $color; /* blue! (из глобальной области) */
}

Использование медиа-запросов

CSS Custom Properties: работают в медиа-запросах

:root {
  --font-size: 16px;
}

@media (max-width: 768px) {
  :root {
    --font-size: 14px; /* Меняется для мобильных */
  }
}

body {
  font-size: var(--font-size);
  /* Автоматически 16px на десктопе, 14px на мобиле */
}

Sass переменные: фиксируются при компиляции

$font-size: 16px;

@media (max-width: 768px) {
  $font-size: 14px; /* Это не работает как ожидается */
  // Sass обработает это во время компиляции,
  // но в итоговом CSS останется только одно значение
}

body {
  font-size: $font-size; /* Фиксировано: 16px */
}

Случайность в Sass

// Sass может генерировать
$colors: #3498db, #2ecc71, #e74c3c;

@for $i from 1 through length($colors) {
  .btn-#{$i} {
    background-color: nth($colors, $i);
  }
}

// Компилируется в
.btn-1 { background-color: #3498db; }
.btn-2 { background-color: #2ecc71; }
.btn-3 { background-color: #e74c3c; }

CSS Custom Properties не могут этого:

:root {
  --colors: #3498db, #2ecc71, #e74c3c;
}

/* Не может генерировать классы автоматически */

Производительность

CSS Custom Properties:

:root {
  --color: red;
}

/* Переменная вычисляется в runtime */
/* Если менять часто, может быть медленнее */
/* Но современные браузеры хорошо оптимизируют */
body { color: var(--color); }

Sass переменные:

$color: red;
body { color: $color; }

/* Компилируется в */
body { color: red; }
/* Нет runtime overhead */

Гибридный подход (рекомендуется)

// Sass для логики и повторного использования
$spacing-unit: 8px;
$base-font-size: 16px;

@function spacing($multiplier) {
  @return $spacing-unit * $multiplier;
}

// CSS переменные для динамических значений
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

body {
  padding: spacing(2); /* Sass функция: 16px */
  color: var(--primary-color); /* CSS переменная: можно менять */
}

Когда использовать что

Используй CSS Custom Properties если:

• Значение меняется во время выполнения
• Нужна тёмная/светлая тема
• Нужна адаптивность по медиа-запросам
• Хочешь менять через JavaScript
• Нужна область видимости (наследование)

Используй Sass переменные если:

• Значение статическое
• Нужна сложная логика
• Нужны функции и миксины
• Хочешь уменьшить размер бандла

Таблица сравнения

Итоговый ответ

CSS Custom Properties (встроенные переменные):

• Обрабатываются браузером (runtime)
• Можно менять через JavaScript
• Динамические и живые
• Имеют область видимости

Sass переменные (препроцессор):

• Обрабатываются при сборке (compile-time)
• Превращаются в статические значения
• Поддерживают логику (функции, миксины)
• Нет области видимости

Рекомендация: используй оба вместе для лучшего результата