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

Процесс написания HTML и CSS может оказаться несколько изнурительным и требовать множества одних и тех же задач снова и снова. Таких задач, как закрытие тегов в HTML или монотонный просмотр шестнадцатеричных значений цвета в CSS.

Такие разные задачи, как правило, небольшие, чуть-чуть снижают эффективность. К счастью, эти и несколько других неэффективных задач были признаны и вызов им бросили препроцессоры.

Препроцессор — это программа, которая берёт один тип данных и преобразует его в другой тип данных. В случае HTML и CSS, одни из наиболее популярных языков препроцессора — это Haml и Sass. Haml преобразуется в HTML, а Sass преобразуется в CSS.

Haml

Haml (HTML abstraction markup language, абстрактный язык разметки HTML) — это язык разметки с единственной целью — предоставить возможность писать красивую разметку. Являясь собственным языком разметки, код, написанный на Haml, позже преобразуется в HTML. Haml продвигает принцип «не повторяйся» и способствует хорошо структурированной разметке, создавая приятный опыт для тех, кто умеет её писать и читать.

SCSS и Sass

SCSS и Sass — это языки препроцессинга, которые компилируются в CSS. Немного напоминают Haml и делают написание кода проще, предлагая для этого совсем немного рычагов. По отдельности SCSS и Sass имеют одно происхождение, однако технически у них разный синтаксис.

Sass (Syntactically Awesome Stylesheets, синтаксически замечательная таблица стилей) пришёл первым и у него строгий синтаксис с отступами. Sassy CSS последовал вскоре после этого, предлагая такую же огневую мощь, что и Sass, но с более гибким синтаксисом, включая возможность писать простой CSS.