Для чего нужен SCSS

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

Преимущества:

• Вложенность — структура кода становится чище и читаемее.
• Переменные — можно хранить цвета, размеры и другие значения для повторного использования.
• Миксины (mixins) — переиспользуемые блоки стилей.
• Импорты — разбиение стилей на модули.
• Математические операции — вычисления прямо в стилях.

Пример:

$primary-color: #3498db;

.button {
  background: $primary-color;
  &:hover {
    background: darken($primary-color, 10%);
  }
}

После компиляции в CSS код становится компактным и оптимизированным.