Посмотрите на бутстрап.
Единственный файл variables.scss позволяет гибко кастомизировать весь фреймворк.
Стили структурированы.
Это два основных преимущества: централизованное управление и организация кода.
Далее, довольно много популярных компонентов и плагинов поставляются с scss/less исходниками. При необходимости кастомизации (а такая необходимость присутствует почти всегда), вы можете пойти тремя путями:
1. Скопировать себе файл стилей и переписать его
2. Подключить оригинальные стили и переназначить селекторы в своей таблицы.
3. Подключить исходники и только переназначить переменные
Еще кейс:
Берем какой-то крупный фреймворк, пусть будет тот же бутстрап. Половина компонентов нам в нем не нужны.
Мы снова можем подключить весь оригинальный файл с лишними стилями. Или мы можем взять исходники и подключить в сборку только необходимое нам. Если завтра нам понадобится еще какой-то компонент, мы просто раскомментируем строку с его подключением.
Еще:
Нам нужно задавать размеры в rem.
Мы можем пойти по плохому пути: назначить руту font-size: 10px и легко рассчитывать ремы в уме. Но ведь задавать пиксели для html не следует.
Или мы можем написать функцию toRem() в препроцессоре и использовать ее.
Не говорю уже о более сложных расчетах.
Или о громоздких.
Вот например:
https://codepen.io/delphinpro/pen/QvLZxg?editors=0100
Посмотрите строку 62 в стилях. Там генерится 60 селекторов. Удобно будет такое писать на голом CSS?
Могу еще писать, но время дорого.
