Что такое css препроцессоры простыми словами

За что ты послал нам препроцессоры? Чем мы тебя прогневали?

Что такое препроцессоры CSS и зачем они нужны.

В наших проектах в Коде мы используем простой CSS-код. Он компактный и понятный. Но у нас маленькие проекты.

В больших проектах CSS-код разрастается настолько, что его поддержка и сопровождение становится отдельной сложной задачей. Чтобы её упростить, используют препроцессоры.

Что такое препроцессоры

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

Представьте, что у вас в проекте 30 разных стилей CSS-кнопок. Они нужны для разных дел: одни опасные, другие безопасные, одни активные, другие выключены и т. д. И есть ещё формы ввода и другие интерфейсные элементы, внешний вид которых прописан в CSS.

И вот у всех этих элементов сейчас стоит параметр border-radius: 7px, то есть скругление по углам — семь пикселей. И вдруг приходит дизайнер и говорит: «Всё пропало, ставь скругление 8 пикселей!» Вы терпеливо заходите в CSS-файл и в 30 местах меняете 7px на 8px.

Приходит дизайнер и говорит: «Миша, всё ерунда, давай по новой. Теперь 6 пикселей». Можно запустить в дизайнера стулом, а можно использовать препроцессор.

С препроцессором у вас 30 кнопок, в которых будет вот так:

border-radius: $defaultBorderRadius

А где-то в отдельном месте документа будет один раз написано:

$defaultBorderRadius: 7px;

И когда дизайнер придёт менять скругление на кнопках, вы измените его один раз, в одном месте, не нанося телесные повреждения дизайнеру.

Какие бывают препроцессоры CSS

Sass. Появился в 2006 году как способ упростить работу с CSS и сразу стал популярен у разработчиков. Некоторые считают, что у Sass невысокая скорость работы, но на практике это можно заметить только на очень больших проектах.

Любопытно, что у Sass есть два синтаксиса:

LESS. В 2009 году другие программисты показали свою версию препроцессора, основанную на Sass. Они взяли за основу чистый CSS-синтаксис и добавили в него возможность использовать все расширения как в Sass. Технически это интереснее, чем простой Sass, но нельзя сказать, что это сильно круче, чем тот же SCSS.

Stylus и другие. Есть и другие препроцессоры — например, тот же Stylus. Принципиально он делает то же самое, но использует другой синтаксис, более лаконичный и простой.

Какой выбрать?

По сути все они делают одно и то же: упрощают работу с CSS-кодом, поэтому это вопрос вкуса и привычек. Если давать общие рекомендации, мы бы сделали так:

Когда использовать препроцессоры

Если у вас CSS-код занимает не больше одной-двух страниц, нет смысла использовать препроцессоры: настройка и описание кода займёт больше времени, чем сразу написать то, что нужно. А вот если у вас большой сайт с разным дизайном на странице или очень сложная CSS-вёрстка, то тут уже пригодятся препроцессоры.

Мы покажем работу препроцессоров на примере SCSS-синтаксиса. Для других препроцессоров примеры будут выглядеть почти так же, отличия только в ключевых словах и некоторых символах.

Переменные. Если вы используете один и тот же фирменный цвет для ссылок, рамок вокруг картинок, то можно задать этот цвет в одном месте, а потом обращаться к нему откуда угодно. Зададим переменными ширину и цвет элемента:

Простая работа с вложенными структурами. Когда мы делали красивые ссылки, то у нас была вложенная структура для элемента а: подчёркивание при наведении, цвет после посещения ссылки, цвет до посещения и так далее. Вот как это можно организовать попроще:

Миксины. Это то же самое, что обычные функции в программировании. Их можно вызывать сколько угодно раз с любыми параметрами. Новый параметр — новый результат работы миксина. Ими удобно оформлять повторяющиеся куски кода в разных местах.

Представьте, что у вас есть шрифт, для которого вы подобрали нужный интерлиньяж, размер и толщину. Но для меню нужен красный текст, в подсказках — белый на чёрном фоне, а основной текст используется как есть. Тогда мы можем написать так:

@mixin good-text <
font: <
family: Arial;
size: 20px;
weight: bold;
>
>
.page-text <
@include good-text;
color: #000000;
>
.menu-text <
@include good-text;
color: #ff0000;
>
.tip-text <
@include good-text;
color: #ffffff;
background-color: #000000;
>

.page-text <
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #000000;
>
.menu-text <
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
>
.tip-text <
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ffffff;
background-color: #000000;
>

Чем больше однотипного кода используется в CSS-файле, тем проще из этого сделать один миксин.

Математика, функции, условные операторы и циклы. Сильная сторона препроцессоров — использование внутренних вычислений для получения готового кода. Например, если вам нужно описать несколько видов шрифта, которые увеличиваются на 4 пункта каждый, это можно сделать в цикле. Если нужно получить точную ширину колонки при разном размере экрана — берите условный оператор.

Преимущества и недостатки препроцессоров

Так как все CSS-препроцессоры делают примерно одно и то же, только немного разными способами, то сильные и слабые стороны у них будут одни и те же:

✅ Хорошо подходят для больших проектов.

✅ Сильно расширяют возможности обычного CSS.

✅ Упрощают работу с однотипным кодом.

✅ Проще вносить изменения и поддерживать код в актуальном состоянии.

✅ Сразу видна логическая структура CSS, легко разобраться в том, из чего состоит каждый элемент.

❌ Нет смысла использовать в маленьких проектах и простых страницах.

❌ На выходе препроцессора получается CSS-код, который сложно прочитать человеку.

❌ Нужно изучать что-то кроме самого CSS.

❌ У каждого препроцессора свой синтаксис, и не получится быстро перейти от одного к другому.

С чего начать

Sass → почитайте sass-scss.ru, там есть всё, что нужно знать для работы с этим препроцессором. Документация настолько подробная, что её можно освоить вообще без опыта работы с таким инструментом.

LESS → Путеводитель для новичков по CSS-препроцессору Less. Просто, доходчиво и с кучей примеров для каждой команды.

Stylus → если знаете английский, почитайте официальный сайт проекта. Если не знаете — почитайте краткое руководство по использованию и опыт разработчиков Яндекс.Почты.

Источник

Препроцессоры в CSS: что это и для чего нужны

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

Применение препроцессоров в CSS

CSS сам по себе не имеет каких-то сложных синтаксических конструкций, так как он просто описывает тот или иной объект на странице. Максимум он способен еще указывать его реакцию на определенное действие пользователя, например, наведение курсора мыши. С одной стороны отсутствие сложных конструкций в языке делает его простым в изучении и применении, но с другой требует дублирование одинаковых участков кода, постоянного повторения ключевых слов и так далее.

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

Основные задачи CSS-препроцессоров

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

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

Разновидности CSS-препроцессоров

В разработке используется три популярных препроцессора:

Более подробно каждый из них рассмотрим дальше в статье.

Дополнительно можно выделить еще препроцессоры, используемые в узких кругах: Closure Stylesheets и CSS Crush. Разработчику есть смысл знакомиться с ними только для решения определенных задач, которые встречаются очень редко, поэтому тратить время на их изучение начинающему верстальщику бессмысленно.

Почему стоит использовать препроцессоры

В веб-разработке, даже в самом небольшом проекте, уже взято за стандарт использование препроцессоров. Уметь с ними работать нужно даже начинающему верстальщику, так как на чистом CSS уже почти не делается новых проектов. Помимо требований потенциальных работодателей существуют и более рациональные причины использования CSS-препроцессоров.

Возможность записать код короче

В стандартном CSS нет возможности делать вложенности, создавать переменные. Это сильно усложняет написание большого объема стилей, создает необходимость дублировать одинаковые участки кода, а также помнить название всех ID и классов. Благодаря препроцессорам разработчик:

Легкость изучения

Благодаря тому, что синтаксис препроцессоров слабо отличается от синтаксиса CSS, разработчик, освоивший стандартный CSS может почти сразу же начать делать проекты, например, на SASS или LESS. Также не составит труда найти понятную документацию на русском языке, бесплатные уроки и мастер-классы, попросить помощи в профессиональном сообществе.

Простота применения

Логичная и понятная структура

Возможность создавать вложения является главным преимуществом любого CSS-препроцессора. Такой код выглядит логичным, его удобно читать и редактировать, плюс, гораздо меньше риск допустить ошибку. Вот так выглядит вложенность:

Родительский селектор 1
Вложенный селектор 1.1
Вложенный селектор 1.2
Вложенный селектор 1.2.1
Вложенный селектор 1.2.2

Пример синтаксиса препроцессора

В чистом CSS разработчику пришлось бы для каждого селектора дублировать название, а возможно и некоторые стили из родительского селектора. Благодаря вложенности все это наследуется, а разработчику требуется лишь дописать нужную надстройку.

Добавление миксинов

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

Пример использования миксинов

Модули

Еще одним важным преимуществом препроцессоров является возможность скомпоновать в модули важные элементы, которые часто используются в работе. Например, можно создать файл с переменными и подключать его к нужным проектам, не тратя время на их повторное написание или копирование. Также вы можете делиться своими модулями с другими разработчиками, что очень удобно при работе в команде.

Популярные CSS-препроцессоры

Всего выделяется 3 популярных CSS-препроцессоров: LESS, SASS и Stalus. Их функционал и синтаксис, в целом, похож друг на друга, хотя различия и имеются. Вокруг этих 3 препроцессоров сформировались большие сообщества разработчиков. Начинающему лучше всего начать изучение CSS-препроцессоров именно с LESS и SASS.

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

Препроцессор LESS

Самый популярный CSS-препроцессор, берущий свое начало в 2009 году. Изначально был написан на Ruby, но сейчас работает полностью на JavaScript, что упрощает его дальнейшую поддержку. Прост в освоении, так как имеет только самые базовые компоненты, с которыми очень просто разобраться. Если вам будет не хватать функционала препроцессора, то его можно расширить за счет использования сторонних плагинов.

Пример синтаксиса LESS

Препроцессор LESS можно подключить через JavaScript-файл, который расположен на официальном сайте решения. С его помощью будет проводиться конвертация в стандартный CSS. Пример подключения скрипта для преобразования:

Препроцессор SASS

Самый многофункциональный и старый из популярных CSS-препроцессоров. Первая версия вышла в 2007 году. Написан на Ruby, плюс, есть применение C++. Это пускай и делает язык более функциональным, но добавляет некоторые сложности для новичка, например, при подключении к проекту и его отладки. По сравнению с LESS имеет куда больше возможностей, часть которых выходит за рамки классического CSS, среди которых можно выделить автоматизацию некоторых моментов. Если представленного функционала будет не хватать, то его можно расширить за счет библиотеки Compass.

Пример синтаксиса SASS

Еще примечательно, что сам SASS имеет два принятых синтаксиса:

Препроцессор Stylus

Пример вложения классов в Stylus

Для подключения потребуется предварительно установить библиотеку Node.js и Gulp. В дальнейшем нужно выполнить инициализацию Stylus для проекта с помощью терминала. В некоторых редакторах кода, например, том же VS Code, можно автоматизировать подключение с помощью специальных плагинов.

Преимущества и недостатки препроцессоров

У всех трех распространенных CSS-препроцессоров есть общие преимущества и недостатки, так как их возможности, синтаксис и функционал в целом похожи между собой.

Преимущества:

Недостатки:

Заключение

Источник

Препроцессоры CSS – незаменимый инструмент современного веб-разработчика

Дата публикации: 2017-04-02

От автора: о препроцессорах css говорят уже давно. Многие разработчики уже применяют их в разработке своих проектов. Есть и такие, кто слышал о препроцессорах или читал про них, но не понимает, какие преимущества дают препроцессоры при написании css кода.

Для многих препроцессоры – это «секретная» технология, преимущества которой весьма условны и неочевидны. В данной статье я расскажу простым языком о том, что такое препроцессоры, для чего они нужны и как они могут помочь веб-разработчику.

Что это такое CSS препроцессоры?

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

То есть это не «революционная сверхтехнология». Это то, что расширяет возможности css. Это то, что может автоматизировать рутинные ежедневные операции и ускорить разработку.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Как препроцессоры жизнь упрощают?

Препроцессоры позволяют ускорить написание css-кода и упрощают его поддержку в будущем.

Рассмотрим пример. На сайте используется красный шрифт. Используя чистый css, вам приходится задавать этот цвет много раз для каждого элемента в отдельности. И если вы решите со временем поменять оттенок красного — вам нужно будет его изменять для каждого элемента. Используя препроцессоры, цвет 1 раз присваивается переменной и уже эта переменная прописывается для каждого элемента. Если вы решите поменять оттенок цвета на этот раз, вам нужно будет поменять его только в одном месте.

Подобный пример встречается достаточно часто. И, как я отмечал в начале, преимуществ использования препроцессоров в этом примере не много. В любом редакторе кода мы можем нажать сочетание клавиш «ctrl»+”F”, найти код цвета «#ff0000» и заменить его на «#00ff00». И цвет поменяется с красного на зеленый во всех местах за один клик мыши.

Так в чем же реально нам могут помочь препроцессоры?

Какие проблемы решают препроцессоры?

Препроцессоры экономят наше время и делают многие рутинные вещи за нас благодаря таким особенностям как: вложенные селекторы, математические функции, ссылки на родительский селектор и даже сообщения об ошибках, которые говорят нам, где и почему произошла ошибка в коде.

Давайте посмотрим, как это все нам может помочь на реальных примерах:

В больших или очень старых проектах, которые постоянно дополняются и усовершенствуются, стили css могут изменяться достаточно часто. И если файл стилей содержит тысячи строк кода, то очень неудобно вносить css правки. Было бы гораздо удобнее, если бы стили были разбиты на логические блоки, и каждый такой блок стилей находился бы в отдельном файле.

Эту проблему препроцессоры решают без каких-либо усилий с вашей стороны. У вас может быть несколько препроцессорных файлов от вашего проекта, которые после компиляции автоматически склеятся, и на выходе вы получите один «красивый» css файл.

Еще одной проблемой css является дублирование стилей и селекторов. По мере развития проекта появляются какие-то снипиты, которые можно использовать повторно. Так же может появиться масса однообразных селекторов отличающихся лишь немного. В итоге если мы переместили блок или переименовали класс какого-то блока нужно отредактировать еще массу селекторов.

Данную проблему в препроцессорах решают миксины. Миксины – это параметризованные или нет функции, которые выдают тот или иной CSS, который мы можем многократно использовать там, где нужно.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Следующая проблема – проблема зависимостей. Например, у вас в стилях задана ширина блока, от нее зависят другие параметры, отступы для других блоков и т.д. Для того чтобы корректно поменять один параметр, придутся подправлять все, зависящие от него.

Эту проблему очень просто решают переменные в препроцессорах.

Кроме всего перечисленного при использовании препроцессоров вы полностью исключаете риск получить ошибку в css файле, получаете более чистый, логичный и кроссбраузерный css.

Преимущества препроцессоров

Исходя из трудностей верстки, с которыми помогают справиться препроцессоры можно назвать следующие преимущества препроцессоров: использование переменных, вложенность, миксины (mixins), наследование и так далее, и так далее – это все понятно. Но больше всего я хочу обратить ваше внимание на то, что знания препроцессоров открывают перед вами возможность найти высокооплачиваемую работу, сделать скачок вверх по карьерной лестнице, увеличить ваш заработок минимум в два раза.

Давайте посмотрим, какие зарплаты предлагают веб-студии верстальщикам без знания препроцессоров на сайте hh.ru :

А вот зарплаты, которые предлагают веб-студии верстальщикам со знаниями препроцессоров на том же сайте:

Как вы можете заметить максимальная оплата труда без знаний препроцессоров и минимальная оплата со знаниями препроцессоров, отличаются в 1,5 раза. А если посмотреть по средним цифрам, то оплата отличается минимум в 2 – 3 раза!

Причем, что еще можно заметить, для этого не нужно знать все препроцессоры. Достаточно знать два самых популярных препроцессора – Sass и Less.

Вывод

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

Лучше знать препроцессоры и ими не каждый день пользоваться, или пользоваться по необходимости. Чем не знать препроцессоры и упустить интересный высокооплачиваемый проект или возможность перейти на более высокооплачиваемую работу.

P.S. Используете ли вы препроцессоры в разработке? Напишите в комментариях, какие препроцесслоры вы используете? Если пока не используете, то почему? Планируете ли начать использовать препроцессоры?

Видео презентация курса «Препроцессоры Sass и Less. Автоматизация и упрощение Front-end разработки»

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Источник

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

Если рассматривать препроцессоры вместе с CSS, то получается картина более понятная, нежели чем рассматривать понятие препроцессора отдельно.

Определение

CSS препроцессор (от англ. CSS preprocessor) — это надстройка над CSS, которая добавляет ранее недоступные возможности для CSS, с помощью новых синтаксических конструкций.

Основная задача препроцессора — это предоставление удобных синтаксических конструкций для разработчика, чтобы упростить, и тем самым, ускорить разработку и поддержу стилей в проектах.

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

При помощи препроцессоров вы можете писать код, который нацелен на:

И это лишь малая часть того, что может дать вам препроцессор. Но не стоит забегать вперёд.

Синтаксический сахар

Перед тем, как перейти к дальнейшему рассмотрению CSS-препроцессоров, давайте обновим наш лексикон новым понятием — «синтаксический сахар».

Синтаксический сахар (от англ. syntactic sugar) — это дополнения синтаксиса языка программирования, которые не вносят каких-то существенных изменений или новых возможностей, но делают этот язык более читабельным для человека.

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

Если попытаться применить это понятие к CSS-препроцессорам, то оно, в общем случае, полностью описывает их суть. Ещё раз напомню, что основной задачей препроцессоров является упрощение и ускорение разработки, а как это ещё можно сделать, если не ввести альтернативные варианты записи?

Какие бывают CSS-препроцессоры?

Пора перейти к более конкретным примерам, а именно к самим CSS-препроцессорам. На момент написания книги можно выделить три популярных препроцессора:

И несколько незначительных для нас игроков:

О первой тройке мы поговорим отдельно немногим ниже, а вот о двух последних разговора вообще не будет, в виду их непопулярности. При желании, описания этих препроцессоров с лёгкостью можно найти в поисковике.

Какой смысл использования препроцессоров?

Как я уже отметил выше, основные плюсы — это читабельность кода, структурирование и повышение производительности.

Существуют также и другие причины того, чтобы начать использовать препроцессор уже сегодня. Я хочу заострить на этом внимание, так как разработчики раньше, да многие и сейчас, отнекиваются от использования препроцессоров, находя их сложными, непонятными и ненужными.

CSS — это сложно

Стандартный CSS — это сложно. Синтаксис без использования вложенности, которую предлагают CSS-препроцессоры, просто напросто сложен для зрительного восприятия. Кроме того, нужно помнить имя родителя при вложенности. Отсутствие нормальных переменных и «функций» делает CSS-код грязным и узконаправленным.

Доступная документация

Прошли те времена, когда документация от препроцессоров была доступна только людям «в теме». Сейчас любой желающий может в кратчайшие сроки освоить любой из препроцессоров, причём с минимальными затратами сил.

Простота использования

Использовать препроцессоры стало проще, чем раньше, причём намного проще. Для этого нужно лишь установить программу, которая будет следить за файлами, предназначенными для препроцессора, и при их изменении будет компилировать содержимое этих файлов в чистый CSS-код.

Для более продвинутых пользователей есть специальные сборщики проектов. Не думайте, что если вы используете программу для препроцессоров, а не сборщик проектов, то вы недостаточно круты. На самом деле, такие сборщики предлагают полный контроль и расширенные настройки, а не делают из вас джедая.

Структура и логичность кода

Самым популярным предлагаемым функционалом любого CSS-препроцессора является возможность вкладывать селекторы друг в друга. Я не буду сейчас приводить пример, так как о возможностях Less, включая вложенность, будет написана соответствующая часть книги. На этом этапе вам стоит знать лишь то, что при использовании препроцессоров, можно вкладывать один селектор в другой, а другой в третий, получая что-то, похожее на оглавление книги:

Конечно, в реальной жизни селекторы не могут начинаться с цифр, однако, для проведения параллели между вложенностью и оглавлением, думаю такое упущение здесь уместно.

Примеси

Если говорить совсем кратко, то, используя примеси (от англ. Mixins), можно сделать код переиспользуемым. Это помогает избежать вспомогательных классов в разметке или дублирования свойств от селектора к селектору.

Модульность

Еще одним бонусом, который прямо сейчас уговорил бы меня начать пользоваться CSS-препроцессором, будет возможность вкладывать файлы в файлы, то есть проще говоря, производить конкатенацию файлов в заданной последовательности. Да, это можно организовать и на чистом CSS, но вкупе с другими возможностями получается очень мощный инструмент.

При этом мы получаем возможность делиться модулями (библиотеками примесей), которые создали для своих нужд и посчитали полезными для других людей. Получается, что любой разработчик может загрузить вашу библиотеку и использовать её в своих целях, вызывая по мере необходимости написанные вами примеси.

Почему бы не подождать развития CSS?

Развитие CSS идёт очень маленькими и неуверенными шагами, так как W3C придерживается приоритета скорости срабатывания CSS (производительности). С одной стороны это правильно и очень важно, но с другой — это отсутствие удобства для разработчиков.

В пример поставлю одну из спецификаций CSS4, которую ввели под давлением разработчиков — селектор по родителю. Столь долгий путь от идеи до принятия решения был из-за того, что W3C считало такой селектор медленным и дальнейшее его использование на сайтах привело бы к диким тормозам. Конечно же, речь идёт о повсеместном применении этого селектора, а не о единичных случаях.

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

Разновидности препроцессоров

Разумеется, как и в любой другой области, всегда есть конкуренция, и на рынке препроцессоров сейчас три главных, враждующих между собой лагеря:

Враждующими я их называю, потому что каждый приверженец одного из препроцессоров считает своим долгом поливать нечистотами представителей других, скажем так, конфессий. Такая неприязнь особенно часто проявляется у любителей препроцессора Sass, который считается старейшим и мощнейшим из всех трёх препроцессоров.

Для полной картины, я хочу привести краткую справку по каждому препроцессору:

Собственно, герой этой книги. Самый популярный на момент написания книги препроцессор. Основан в 2009 году Алексис Сельер (Alexis Sellier) и написан на JavaScript (изначально был написан на Ruby, но Алексис вовремя сделал правильный шаг). Имеет все базовые возможности препроцессоров и даже больше, но не имеет условных конструкций и циклов в привычном для нас понимании. Основным плюсом является его простота, практически стандартный для CSS синтаксис и возможность расширения функционала за счёт системы плагинов.

Sass (SCSS)

Самый мощный из CSS-препроцессоров. Имеет довольно большое сообщество разработчиков. Основан в 2007 году как модуль для HAML и написан на Ruby (есть порт на C++). Имеет куда больший ассортимент возможностей в сравнении с Less. Возможности самого препроцессора расширяются за счёт многофункциональной библиотеки Compass, которая позволяет выйти за рамки CSS и работать, например, со спрайтами в автоматическом режиме.

Имеет два синтаксиса:

Stylus

Источник