Препроцессоры CSS — это надстройки для «ванильного» CSS, которые открывают ему дополнительные возможности за счет новоиспеченных синтаксических конструкций. То есть препроцессоры — это более удобный синтаксис CSS, который «развязывает руки» разработчику, упрощая и ускоряя его работу.
Препроцессоры CSS поддерживаются каждым современным браузером, поэтому проблем с кроссплатформенностью у них нет.
На счет надобности препроцессоров ходит много споров, потому что они имеют важную особенность — весь код, написанный на препроцессорном языке, преобразуется в «чистый» CSS и только потом «читается» браузером. Поэтому есть сторонники подхода писать на «чистом» CSS и критиковать препроцессоры, ведь они все равно конвертируются в чистый CSS.
Мы не будем разбираться, хорошо или плохо использовать препроцессоры, а посмотрим на эту технологию объективным взглядом.
Препроцессоры CSS
Препроцессоры CSS несут в себе синтаксический сахар. Синтаксический сахар — это измененный синтаксис основного языка, за счет чего основной язык становится более понятным, легким и читабельным. Синтаксический сахар не вносит в язык существенных функциональных изменений, но приносит новые синтаксические конструкции, которые более понятны для людей.
Препроцессоры CSS как нельзя лучше показывают, как работает синтаксический сахар.
Какие бывают препроцессоры CSS
Препроцессоры CSS представлены несколькими видами, но основных выделяют только 3:
Less,
Sass,
Stylus.
Есть еще такие препроцессоры, как Closure Stylesheets, CSS Crush и др. Однако мы сегодня поговорим о первых трех.
Так сложилось, что последователи препроцессоров разделились на 3 лагеря согласно каждому отдельному препроцессору. Каждый лагерь использует и восхваляет свой вид препроцессора и всячески «поливает грязью» другие.
Препроцессор Less
Препроцессор Less остается самым популярным из всех по количеству разработчиков, которые его используют. Он берет свое начало в 2009 году, разработан на JavaScript. Отлично взаимодействует с «чистым» синтаксисом CSS и имеет все основные характеристики, свойственные препроцессорам.
Главное его преимущество перед остальными препроцессорами — это простота, близкая схожесть со стандартным синтаксисом и набор плагинов для расширения его функциональности. Использует расширение «.less».
Препроцессор Sass
Препроцессор Sass — мощнейший и старейший из трех, поэтому также пользуется особым к себе отношением среди веб-разработчиков. Его история начинается в 2007 году, разработан на Ruby. Обладает более широкими возможностями, чем Less. Помимо этого, есть дополнительная возможность расширить функциональность за счет библиотеки Compass. Эта библиотека превращает препроцессор в нечто большее, чем инструмент для работы со стилями.
Препроцессор Sass разделен на 2 вида:
• непосредственно Sass, который имеет устаревший синтаксис, использует расширение «.sass»;
• Scss, который содержит много элементов стандартного синтаксиса CSS, использует расширение «.scss».
Препроцессор Stylus
Препроцессор Stylus моложе, чем его конкуренты, — его основали в 2010 году и написали на JavaScript. Ему предвещают популярность из-за его удобства и простоты. Например, в его синтаксисе отсутствуют «фигурные скобки» и другие знаки препинания. Хотя сама конструкция синтаксиса напоминает «чистый» CSS. Для файлов использует расширение «.styl».
Для чего использовать препроцессоры CSS
Препроцессоры открывают возможность использовать вложенность стилей и переменные. Чистый CSS раньше эту возможность не предоставлял, а теперь в нем также появилась возможность использовать переменные.
Они приносят простоту. Переменная создается один раз в начале документа и используется во всех необходимых местах. Потом, если нужно откорректировать значение переменной, это делается в одном месте, где объявлена переменная. А значение меняется во всех местах, где переменная применялась. Это намного удобнее, чем корректировать одно значение во многих местах.
Вложенность помогает понятно оформлять синтаксис. Глянув на вложенный синтаксис, всегда можно увидеть, где родительский элемент, а где дочерний. Чистый CSS этой возможности не дает, поэтому приходится все держать в голове.
Использовать препроцессоры CSS стало легче, чем раньше:
• доступна документация, в том числе и на русском языке;
• чтобы начать пользоваться препроцессором, нужно только инсталлировать программу, которая контролирует файлы препроцессора и компилирует их в «ванильный» CSS.
Заключение
Препроцессоры CSS призваны облегчить работу веб-разработчикам. В большинстве случаев у них это отлично получается. Невозможно определить, какой препроцессор лучше или легче, — нужно пробовать их все, чтобы остановиться на каком-то из них. Также невозможно сказать, что «чистый» CSS настолько беспомощен, чтобы искать помощи у препроцессоров. Большинство веб-разработчиков пишут на «чистом» CSS и утверждают, что это прекрасно.
Другое
