CSS-препроцессоры

CSS-препроцессоры
CSS-препроцессоры
5 (100%) 2 votes

Начинающие веб-разработчики часто задаются вопросом, как писать удобные, понятные, легко читаемые и качественные 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-препроцессоры




На данный момент самые популярные CSS-препроцессоры — это LESSSass (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. Он поддерживает несколько вариантов написание кода (синтаксиса). Это самый молодой, но наверное, самый удобный препроцессор

Об авторе

Занимаюсь программированием уже более 7 лет. Часто использую JavaScript (Node.js) и Python. Хобби - Квантовая механика и нейронные сети.

Комментарии