Зачем пользоваться сейчас препроцессорами sass и scss?
Посмотрите на бутстрап.
Единственный файл variables.scss позволяет гибко кастомизировать весь фреймворк.
Стили структурированы.

Это два основных преимущества: централизованное управление и организация кода.

Далее, довольно много популярных компонентов и плагинов поставляются с scss/less исходниками. При необходимости кастомизации (а такая необходимость присутствует почти всегда), вы можете пойти тремя путями:

1. Скопировать себе файл стилей и переписать его
2. Подключить оригинальные стили и переназначить селекторы в своей таблицы.
3. Подключить исходники и только переназначить переменные

Еще кейс:

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

Еще:

Нам нужно задавать размеры в  rem.

Мы можем пойти по плохому пути: назначить руту font-size: 10px и легко рассчитывать ремы в уме. Но ведь задавать пиксели для html не следует.
Или мы можем написать функцию toRem() в препроцессоре и использовать ее.

Не говорю уже о более сложных расчетах.
Или о громоздких.
Вот например: https://codepen.io/delphinpro/pen/QvLZxg?editors=0100
Посмотрите строку 62 в стилях. Там генерится 60 селекторов. Удобно будет такое писать на голом CSS?

Могу еще писать, но время дорого.
Из плюсов препроцессоров есть переменные и норм. синтаксис похожий на ЯП