Что такое css препроцессор, простыми словами?

Это шутка, которая одним упрощает жизнь, а другим, наоборот, усложняет. Это CSS с другим синтаксисом (у каждого препроцессора он свой, но они, в целом, похожи), который потом конвертируется в нормальный CSS, позволяет не писать по сто раз одни и те же значения и селекторы, можно не ставить точку с запятой (в Stylus, например), можно задавать условия, можно все цвета на сайте завязать на одном значении, и если продавать шаблоны, можно в одном единственном месте поменять цвет, другие цвета автоматически пересчитаются и новый сайт готов за считанные секунды. Вам лучше почитать обо всех возможностях и определиться, нужно оно вам или нет, но я советую лучше обратить внимание на ПОСТпроцессор PostCSS, а препроцессоры, говорят, скоро вымрут как вид.

в общем в css нету переменных и миксинов - а в less sass это есть, можно к примеру делать так :
body{
background:#red;
}
но до этого объявить для #red цвет и употреблять его везде, color:#red; и тд - для крупных проектов это классно для сайта на репе github это не надо

средство на серваке, которое видоизменяет код CSS (из файла, лежащего физически на с серваке) перед отправлением в ответ на запрос клиента (браузера).
в файле .css вы можете в принципе любую фигню писать, смотря какой препроцессор, а браузер все равно получит стандартный CSS без ошибок.
так же работают и препроцессоры для ЯП вроде TypeScript или CoffeeScript - конвертируют в обычный JS, который уже получает браузер.
а что конкретно за фигня и зачем ее писать - это не скажу, не работал с ними.