Одни из самых популярных препроцессоров для ускорения процесса верстки – LESS, SASS (SCSS). Разбираемся, что это такое и в чем их преимущества.
Что такое препроцессоры CSS?
Препроцессор CSS – инструмент в виде специального скрипта, который расширяет синтаксис CSS, добавляя множество дополнительных функций для упрощения разработки и поддержки стилей веб-страниц.
CSS preprocessor позволяет использовать такие элементы и свойства, которых нет в стандартном наборе каскадных таблиц стилей:
- переменные (для хранения значений цветов, размеров, шрифтов и других стилевых свойств);
- циклы;
- импорт и наследование;
- условные операторы;
- миксины и другие полезные функции.
С помощью препроцессоров легко создавать модульный, легко поддерживаемый и эффективный код. Кроме того, использование таких инструментов повышают продуктивность фронтендера.
Препроцессоры LESS и SCSS имеют свои преимущества и недостатки, поэтому нужно выбирать инструмент, исходя из потребностей проекта. Если хотите узнать больше про возможности каскадных таблиц стилей, можете изучить справочник CSS.
LESS: возможности инструмента
LESS – мощный препроцессор CSS, созданный Алексисом Селлье в 2009 году. У него множество удобных функций для упрощения и улучшения процесса написания стилей, среди них:
- Переменные. Они начинаются с “@” (например, color: @pale-green-color). Кроме цвета переменные могут иметь такие значения – число, строка или булево значение.
- Вложенные правила. Упрощают процесс создания и редактирования вложенных селекторов.
- Миксины. Позволяют встраивать все свойства класса в другой класс за счет включения имени класса как одного из своих свойств.
- Операторы и функции. Среди разрешенных операций – сложение, вычитание, деление и умножение значений свойств и цветов.
Хотите знать больше про LESS – что это, его возможности и варианты использования при разработке сайтов? Тогда записывайтесь на курсы фронтендеров в Компьютерную школу Hillel. В частности, там расскажут, как корректно использовать object-fit CSS для обрезки, сжатия и растягивания изображений.
Препроцессор SCSS: что это?
Это один из самых популярных препроцессоров CSS. SCSS или Sassy CSS – это новый вид синтаксиса препроцессора SASS, в котором используются фигурные скобки, как в каскадных таблицах. Как подключить SCSS в HTML? Для начала нужно к HTML подключить обычный CSS, куда будет нужно скомпилировать SCSS с помощью webpack или другого сборщика.
Sassy CSS предоставляет различные возможности:
- переменные. Они начинаются с “$”;
- вложенные правила. Можно вкладывать селекторы друг в друга, чтобы избежать повторений кода;
- миксины. Такие повторяемые участки кода удобно включать по несколько раз. Он начинается с @mixin, далее следует его имя, параметры и сам код;
- операторы, циклы, условия и многое другое.
Получается, что основная разница между CSS и SCSS – синтаксис. Препроцессор дает намного больше возможностей при разработке сайтов. Поэтому в противостоянии SCSS vs CSS препроцессор находится в выигрышной позиции.
По материалам: https://itwiki.dev/ru
