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

SCSS (Sass) переменные позволяют использовать логику, вложенность, математические операции и миксины. Они компилируются в CSS и не доступны в браузере. CSS переменные (Custom Properties) — динамические, работают в браузере, их можно изменять через JS.

Пример SCSS:

$primary-color: #333;
body {
  color: $primary-color;
}

Пример CSS:

:root {
  --primary-color: #333;
}
body {
  color: var(--primary-color);
}

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

• SCSS переменные компилируются в статические значения, CSS переменные — динамические.
• CSS переменные можно менять через JS (document.documentElement.style.setProperty()).
• SCSS поддерживает сложные операции, циклы, условия.