Что такое препроцессоры css Sass и Less

В данной статье мы рассмотрим решение для ускорения сборки front-end вашего сайта и дальнейшей быстрой его переделки.

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

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

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

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

Препроцессоры css

Препроцессоры css — это технологии, созданные с целью расширить функционал привычных нам файлов стилей (css)

Существует несколько популярных css препроцессоров таких как Sass и Less. Разумеется их гораздо больше.

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

Препроцессоры мы используем на стороне разработки и разворачивать их на стороне сервера не стоит.

Схема работы препроцессора css

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

• Использование переменных изменение значение одной переменной влечёт изменение значений сразу нескольких правил css где это значение встречалось.

• Сокращение кода благодаря правилам вложенности удаётся существенно сократить и оптимизировать код, что ускоряет его загрузку.

• Удобство редактирования кода дорабатывать код стало гораздо проще.