Чем отличаются переменные в препроцессорах от нативных переменных CSS?

Основное различие

Переменные в препроцессорах (Sass, Less, Stylus) — это инструмент разработки, который работает только на этапе сборки. Когда вы пишете $color: red в Sass, компилятор заменяет все вхождения $color на red в итоговом CSS-файле. В браузере никаких переменных не остаётся — только конкретные значения.

Нативные CSS-переменные (custom properties) объявляются через --имя: значение и остаются в CSS как есть. Браузер вычисляет их значение в момент отрисовки страницы, что позволяет менять их динамически, например, через JavaScript или в медиазапросах.

Ключевые отличия

• Время вычисления: препроцессорные — на этапе компиляции, CSS-переменные — в рантайме браузера.
• Наследование: CSS-переменные наследуются по дереву DOM, препроцессорные — нет.
• Динамика: CSS-переменные можно менять через JS или анимации, препроцессорные — нельзя.
• Область видимости: CSS-переменные могут быть локальными для элемента, препроцессорные — только глобальные или вложенные в блоки.

Пример кода

// Sass (препроцессор)
$primary-color: #3498db;
.button { background-color: $primary-color; }
// Результат: .button { background-color: #3498db; }

// CSS custom properties
:root { --primary-color: #3498db; }
.button { background-color: var(--primary-color); }
// Можно изменить через JS:
document.documentElement.style.setProperty('--primary-color', '#e74c3c');

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

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

Итог: Если вам нужна динамика и наследование — выбирайте CSS custom properties. Если нужна простота и статичность — препроцессорные переменные. Часто их комбинируют: препроцессорные для конфигурации, CSS-переменные для рантайм-логики.