Зачем нужен Sass?

Продвинутые темы

Sass нужен, чтобы расширить возможности CSS: добавить переменные, вложенность, миксины, функции и модульность — упрощая написание и поддержку стилей.

Что даёт Sass

Переменные

$primary: #6b46ff;
.button { color: $primary; }

Вложенность

.card {
  padding: 16px;
  &:hover { transform: scale(1.02); }
  .title { font-weight: bold; }
}

Миксины (переиспользуемые блоки)

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.box { @include flex-center; }

Функции и операции

@use 'sass:math';
@use 'sass:color';
.box { width: math.div(100%, 3); color: color.adjust($primary, $lightness: -10%); }

Модульность (@use / @forward; @import устарел)

Разбиение стилей на файлы-партиалы.

Циклы и условия

@for $i from 1 through 3 {
  .col-#{$i} { width: math.div(100%, 3) * $i; }
}

Зачем нужен

Меньше дублирования (DRY) — переменные, миксины.
Структурированные стили — вложенность, модули.
Удобство для больших стилевых систем.

Актуальность

Современный CSS перенял многое (кастомные свойства --var, вложенность), плюс есть CSS Modules и CSS-in-JS. Но Sass всё ещё широко используется. Компилируется в обычный CSS.

Коротко для собеседования

Sass — препроцессор CSS: добавляет переменные, вложенность, миксины, функции, модульность, циклы/условия. Уменьшает дублирование (DRY) и упрощает поддержку больших стилей. Компилируется в обычный CSS. Современный CSS перенял часть возможностей, но Sass остаётся популярным.