В веб-разработке широко используются препроцессоры CSS. Основная задача препроцессора - сделать код более читабельным, логичным и структурированным. Наиболее популярные препроцессоры сейчас - это SASS, LESS и Stylus. Зачем вообще использовать препроцессоры? Уместный вопрос, особенно когда только более-менее изучил CSS, а тут снова учить что-то еще более сложное. Но специалисты утверждают, что:
- как раз CSS - сложно, а препроцессоры упрощают и ускоряют процесс
- простота использования достигается за счет использования других программ, в том числе сборщиков проектов
- примеси (mixin) и переменные упрощают код
- вложенность позволяет сократить код, избежать повторов - DRY (Don't Repeat Yourself)
- упрощают компонентный подход, который сейчас везде
LESS (плюсы и минусы)
- простой и удобный
- написан на JS
- минус: нет массивов, циклов и условий
- быстрее, чем Sass
Sass
- самый мощный
- хорошее сообщество
- написан на Ruby
- больше возможностей, чем у Less
- мощная библиотека Compass
- два варианта: Sass (упрощенный и устаревший) и SCSS - стандартный
Stylus
- самый молодой
- очень гибкий
- удобный и расширяемый
- написан на JS
- много вариантов синтаксиса (можно даже писать без : ; {} и пр.)
В целом получается, разница между ними не так существенна, можно попробовать разные и выбрать тот, который больше понравится. Например, в Яндекс сделали так:
мы взяли несколько имеющихся блоков, после чего попробовали переверстать их, используя каждый из препроцессоров.
В итоге выбрали Stylus, по ссылке есть объяснение, почему.
Да, если кто не понял, про сахар, то вот: дополнения языка программирования, которые не меняют кардинально язык, но делают его более читабельным, иногда называют синтаксическим сахаром (syntactic sugar).