В чем разница между переменными в CSS и переменными в SCSS?

Основное различие: время вычисления

CSS-переменные (кастомные свойства) вычисляются браузером во время выполнения страницы, а SCSS-переменные — на этапе компиляции препроцессора. Это ключевое отличие определяет все остальные особенности.

Динамичность и наследование

CSS-переменные наследуются через DOM и могут быть переопределены в любом селекторе, включая медиа-запросы и псевдоклассы. SCSS-переменные имеют лексическую область видимости (блоки кода) и не реагируют на изменения DOM.

/* SCSS */
$primary: blue;
.button { color: $primary; }
.dark .button { $primary: white; /* Ошибка: не переопределит */ }

/* CSS */
:root { --primary: blue; }
.button { color: var(--primary); }
.dark .button { --primary: white; /* Работает */ }

Применение в JavaScript

CSS-переменные можно читать и изменять через JS, что удобно для динамических тем или анимаций. SCSS-переменные недоступны в рантайме.

// Чтение CSS-переменной
getComputedStyle(element).getPropertyValue('--primary');
// Изменение
element.style.setProperty('--primary', 'red');

Вывод

Используйте CSS-переменные для динамических стилей, тем и адаптивности. SCSS-переменные подходят для статических значений, которые не меняются в рантайме, и для улучшения читаемости кода на этапе разработки.