CSS-препроцессор (от англ. CSS preprocessor) делает возможности обычного CSS шире и разнообразнее. Достигается это путем использования новых синтаксических конструкций. Другими словами, препроцессоры расширяют возможности CSS, автоматизируют рутинные операции и, следовательно, ускоряют разработку.
Задача препроцессоров – предоставить простые синтаксические конструкции для программиста, чтобы ускорить рабочий процесс и поддержку стилей в проектах. Благодаря этому инструменту, разработчики могут написать код, направленный на его читабельность, структурированность, производительность, логичность.
Препроцессоры выполняют ряд функций:
- Преобразуют исходный код в чистый, валидный CSS-код.
- Стандартизируют браузерные префиксы и хаки.
- Делают синтаксис более простым и понятным.
- Модернизируют логику стилизации.
Стоит отметит, что для стилизации потребуется использование только нескольких простых подходов, как: функций, переменных, условий и т.д., а также есть возможность применять математику.
Рассмотрим наиболее популярные CSS-препроцессоры:
Saas (SCSS)
Первоначально он был шаблонизатором Html – Haml. Новые возможности по управлению CSS пришлись по вкусу многим веб-разработчикам. Это, например, вложение секторов, переменные, миксины. Подходит для программистов, которым привычнее работать со стилями как с кодом.
При использовании Saas стоит обратить внимание на многофункциональную библиотеку – Compass. После его установки можно перестать думать о вендерных префиксах, упрощается работа с сетками, есть утилиты для работы с цветами, можно работать со спрайтами в автоматическом режиме.
Less
Работа с препроцессором Less больше всего подойдет на начинающим программистам, изучающим CSS. Главным его отличием служит поддержка нативного синтаксиса CSS, что упрощает работу для новичков. А также это отличный вариант для верстальщиков, которые работают со стилями как с обычной версткой. Главным преимуществом Less служит его простота, имеет практически стандартный синтаксис CSS и возможность увеличения функционала за счет плагинов.
Stylus
Его особенность в том, что переменные можно добавлять явно и неявно. Например: font = ‘Arial’; - неявный вариант. А вот $font = ‘Arial’ - явный. Front-end разработчику нужно знать, что при продолжительно работе с процессором Stylus, он может подзабыть классический CSS, что может вызвать проблемы работы с чистыми стилями. Подходит для тех, кто тяготеет к минимализму.
Для каждого из этих препроцессоров доступно огромное количество разнообразных библиотек, которые способы многократно упростить процесс разработки. CSS-препроцессоры помогут с рутинной работой верстальщику и взять на себя выполнение повседневных операций. Однако, помните, что важнее знать процессоры и пользоваться ими только при необходимости, чем не знать их и упустить клиента с высокооплачиваемым проектом.
