Начинающие веб-разработчики часто задаются вопросом, как писать удобные, понятные, легко читаемые и качественные CSS стили. Ответ очевиден. Нужно использовать CSS-препроцессоры!
Что такое CSS-препроцессор
CSS препроцессор (CSS preprocessor) — это метаязык (надстройка над CSS), программа, которая на вход принимает данные и выдает данные для входа другой программы (обычно это компиляторы). Используя CSS-препроцессоры, для вас становится доступными много полезных возможностей, которые в обычном CSS недоступный.
Представьте, у нас есть файл style.less, в котором мы пишем код / стили на препроцессорном языке LESS. В этом файле доступны все свойства CSS и все возможности препроцессора LESS. Мы в нем пишем код, компилятор языка компилирует файл style.less и на выход мы получаем файл style.css с валидным CSS кодом.
Почему нужно использовать CSS-препроцессоры
CSS-препроцессоры имеют удобные конструкции и возможности, которые облегчают жизнь разработчика.
Основные возможности CSS-препроцессоров:
- Переменные
- Вложенные правила
- Миксины
- Предопределенные функции
- Операторы, импортирование файлов, сообщения об ошибках
CSS-препроцессоры генерируют валидный CSS код, мы получаем более чистый и логичный код, разработка ускоряется а поддержка стилей сайта упрощается.
Основные CSS-препроцессоры
На данный момент самые популярные CSS-препроцессоры — это LESS, Sass (Scss) и Stylus. По функциональности все CSS-препроцессоры примерно одинаковы.
- LESS
- Метаязык / CSS-препроцессор LESS разработал Alexis Sellier. Первая версия языка LESS появилось в 2009 году. Препроцессор LESS разработан под влиянием CSS-препроцессора SASS. Тогда уже была новая версия препроцессора SASS, который отличалось от старой версии в основном по синтаксису — это SCSS. И именно SCSS влияло на LESS. Это касается и синтаксиса и основных возможностей. Первая версия CSS-препроцессора LESS была написана на языке программирования Ruby. Но в последующих версиях разработчики отказались от языка Ruby и препроцессор LESS была заново написана, но в этот раз на языке программирования JavaScript.
- SASS (SCSS)
- Первая версия препроцессора SASS появилось в 2007 году. SASS написано на языке Ruby и он имеет два синтаксиса — старый и новый. Старый — это SASS, в нем нет фигурных скобок, а вложенность реализовано с помощью отступов. Новый — это SCSS, здесь присутствуют фигурные скобки. SASS имеет больше возможностей по сравнению с LESS и Stylus, также возможности SASS можно расширять с помощью библиотеки Compass.
- Stylus
- Первая версия препроцессора Stylus появилось в 2010 году. CSS-препроцессор Stylus написан на языке программирования JavaScript. Он поддерживает несколько вариантов написание кода (синтаксиса). Это самый молодой, но наверное, самый удобный препроцессор
Комментарии