Краткий обзор отличий LESS от SASS
Вчера пол дня потратил на подробное изучение LESS и его отличие от используемых нами SASS/SCSS.
Синтаксис SASS мне импонирует больше чем SCSS за его краткость. Но большая вложенность стилей в SASS может быстро ликвидировать все преимущества его краткости. В любом случае разницу между SASS и SCSS не принципиальна. LESS оказался ближе к SCSS чем к SASS. И, в общем, это тоже самое. Отличий не много, но парочка из них принципиально меняют расстановку сил.
1. LESS — может client-side с использованием JS.
Точнее он не то чтобы может, он на это и расчитан. Обычная практика использования LESS-кода:
Это потом уже к нему прикрутили возможность компиляции на сервере (и на js и на ruby).
На первый взгляд какое-то странное свойство. Зачем компилить на стороне клиента, если можно отлично скомпилить на сервере и отдавать уже готовую ужатую CSS как мы привыкли с SASS?
Причина становится видна после изучения невзрачных самых послених строках документации к LESS:
Вот такая маленькая одинокая строчка дает возможности о которых только мечтали верстальщики с начала освоения стилей. Вызов из CSS ява-скрипта на стороне клиента и учет фактических параметров браузера при создании стилей.
Тоесть у нас появилась возможность сначала загрузить DOM, а потом под него создать специальный CSS прямо на стороне клиента. Дальше сами думаейте какие возможности этот открывает.
Нужно ли это вашему проекту это вопросу другой. Понятно что все привыкли к клиентской неизвестности/независимости и верстке в стиле «делаем универсально, чтобы более-менее показывалось у всех на всех разрешениях». Но это не повод забывать что теперь такая возможность есть и с ней вы можете делать, к примеру, ну очень резиновую верстку.
2. LESS, в отличии от SASS/SCSS не имеет логики.
В LESS нет if/then, for и т.п. Хотя, учитывая то, что в него легко встраивается JS думаю логику вполне возможно прикрутить. Не пробовал.
3. В LESS проще миксинг + миксить можно классы.
Очень понравилось то, что в LESS можно включать в определение свойства других классов. Собственно класс и является миксином. Это еще одна особенность которой нет в SASS/SCSS. Вы можете включить в LESS обычный CSS файл и использовать его классы для определия своих свойств. Например:
.wrap text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
>
pre < .wrap >
Резюме
За исключением 1-го пункта разница не велика и выбор большена любителя.
Лично для меня LESS выглядит более привлекательным из-за своей простоты. Циклы и условия в стилях мне еще никогда не были нужны. Классические утилиты типа «box-shadow, linear-gradient, darken’ в LESS есть.
Да, под SASS написано уже множество готовых библиотек (compass, bourbone и достаточно широкое сообщество), но под LESS есть тот же Twitter Bootstrap и этого более чем достаточно.
P.S. Нашел старницу сравнения SASS vs LESS и вместе с ней открыл для себя любопытный сервис аргументированных сравнений wrangl.com
LESS
LESS (Leaner Style Sheets — компактные таблицы стилей) — динамический язык стилей, разработанный в 2009 году программистом Алексисом Селье.
Освойте профессию «Frontend-разработчик»
Он представляет собой препроцессор и вложенный метаязык, преобразующий валидный CSS в LESS-программу с аналогичным семантическим наполнением. За счет переменных, функций, циклов и иных технологий он расширяет и упрощает работу со стилями.
LESS — это свободное ПО с открытым исходным кодом, распространяемое по лицензии Apache License 2. Первая версия LESS была реализована на языке Ruby, последующие — на JavaScript. За счет синтаксиса, основанного на CSS, этот язык отличается низким порогом вхождения.
Профессия / 9 месяцев
Frontend-разработчик
Создавайте интерфейсы сервисов, которыми пользуются все
Что такое LESS
Основным языком стилей, используемым в веб-разработке, является CSS. Его популярность обусловлена простотой и универсальностью применения, однако ограничения снижают его удобство в некоторых ситуациях — например, если веб-документ простой и в нем часто используется один и тот же цвет или шрифт. Изменить их значения разом нельзя, придется это делать вручную во многих фрагментах документа. Другой важный недостаток CSS — отсутствие вложенности, из-за чего написанный на этом языке код визуально сложен для восприятия. И если разобраться в небольшом фрагменте разработчику не составит особого труда, то при работе с большими массивами могут возникнуть проблемы.
Эти ограничения CSS — сознательное решение разработчиков языка, цель которых заключается в максимально быстрой загрузке стилей веб-страницы браузером. Добавление дополнительных возможностей увеличивало бы время обработки таблиц браузером, что негативно сказалось бы на быстродействии.
Для преодоления этих ограничений и был разработан LESS, а также его аналоги, такие как SASS или Stylus. Для их определения используются следующие понятия:
- Метаязык — то есть язык, используемый для описания другого языка более низкого уровня (в данном случае CSS);
- Препроцессор — программная надстройка, вырабатывающая данные, которые уже будут использоваться непосредственно самим CSS-обработчиком веб-браузера.
Например, чтобы присвоить фрагменту веб-страницы темно-персиковый цвет с помощью CSS, нужно прописать в соответствующем элементе код #FF9F94. Проблема в том, что если таких фрагментов много, то нужно это делать в каждом из них вручную. В LESS это можно сделать гораздо проще, указав данный код как значение переменной, которая уже автоматически присвоит нужный цвет соответствующим фрагментам веб-страницы.
Иными словами, задача LESS как препроцессора CSS — упростить задачу разработчика, предоставив ему более понятные, функциональные и удобные синтаксические конструкции, чем те, которые имеются в самом CSS. Человек пишет на LESS код так, как удобно ему, затем компилятор языка преобразует его в CSS-код, который уже понятен браузеру. Кроме того, с помощью этого языка решаются следующие задачи:
- Повышение структурированности и логичности кода, что не только ускоряет его написание, но и упрощает поиск ошибок, тестирование и т. д.
- Улучшение производительности за счет того, что нужные переменные задействуются по мере необходимости и позволяют браузеру не тратить на их обработку ресурсы платформы, если в том нет нужды.
Возможности LESS
Данный язык существенно расширяет и упрощает создание и использование CSS-стилей за счет собственных встроенных возможностей.
Переменные. В языке LESS они представляют собой то же самое, что и в других языках программирования — области физической или виртуальной памяти, которым можно присваивать определенные значения. Используются они аналогичным образом: вместо того чтобы каждый раз прописывать определенные значения в коде вручную, достаточно указать их заранее в переменной и применять ее в нужных фрагментах. Таким образом можно быстро настроить цвет, шрифт и другие атрибуты форматирования веб-документа.
Вложения. Чистый CSS поддерживает каскадирование, но не вложенность селекторов (выражений, сообщающих браузеру, к каким фрагментам HTML присвоить то или иное свойство CSS). Из-за этого CSS-код большого веб-документа выглядит громоздким, что усложняет как его написание, так и последующее тестирование и обработку. В LESS это ограничение можно обойти, вложив один селектор в другой. Таким образом, наследование между фрагментами CSS становится более понятным, а сам код — более коротким.
Функции и операции. С их помощью в LESS можно свободно сочетать между собой различные свойства для получения более сложных, адаптировать их к использованию в зависимости от контекста, выполнять с ними различные математические действия — сложение, вычитание, умножение и т. д. Операции и функции в LESS делают язык более гибким и динамичным по сравнению с традиционным CSS.
Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все
Преимущества LESS
У LESS имеется множество преимуществ как перед самим CSS, так и перед другими CSS-препроцессорами вроде того же SASS:
Быстрая компиляция. Чтобы код, написанный на LESS, был понятен браузеру, он должен быть предварительно превращен в традиционный CSS. Для этого в языке есть встроенный компилятор, при этом он работает значительно быстрее, чем у аналогичных препроцессоров. В отличие от CSS, в котором действуют статичные правила, LESS представляет собой динамический язык стилей. Это значит, что он позволяет определять тип данных и компилировать их непосредственно «на лету», то есть по ходу обработки кода.
Простота. За счет использования вложенности селекторов код, написанный на LESS, воспринимается гораздо проще, чем CSS. Это облегчает как его написание, так и последующую проверку на ошибки. Кроме того, с помощью наследования и повторного использования стилей можно существенно сократить размер кода.
Ускорение разработки. Благодаря переменным в LESS присваивать повторяющиеся значения различным фрагментам кода значительно проще, чем прописывать каждое вручную. Соответственно, и вносить изменения в уже написанный код становится легче.
Низкий порог вхождения. Если разработчик хорошо знаком с традиционным CSS, освоение LESS не вызовет у него больших проблем. Это достигается за счет схожего синтаксиса обоих языков.
Возможность подключения плагинов. Так как LESS является открытым ПО, ведущий и сторонние разработчики постоянно дополняют его основной функционал различными плагинами. Их можно скачать как с официального сайта, так и с независимых репозиториев. Кроме того, открытый характер этого языка делает более доступным его изучение за счет наличия большого числа руководств и форумов, в которых разработчик может получить помощь.
Недостатки LESS
Несмотря на широкую популярность, этот язык разметки стилей имеет и свои недостатки. Причем многие программисты из-за них отказываются от его использования в пользу более раннего препроцессора SASS, который в значительной мере повлиял на сам LESS. К наиболее значимым недостаткам относятся:
- Необходимость хорошо знать CSS, так как на нем основан синтаксис LESS. Впрочем, изучение обоих языков может происходить параллельно, поэтому для опытных программистов это большой проблемы не составляет.
- LESS более чувствителен к ошибкам, поэтому даже опытному разработчику придется тестировать код после его написания. При этом встроенные инструменты отладки и поиска ошибок не всегда работают должным образом.
- LESS уступает некоторым другим препроцессорам CSS (в первую очередь, SASS) по количеству фреймворков, а также по количеству встроенных возможностей, что частично компенсируется подключением плагинов.
Способы подключения LESS
На стороне клиента. Это наиболее простой в плане реализации способ установки LESS, так как он задействует непосредственно браузер пользователя с помощью скрипта JavaScript. Для этого нужно:
- подключить файл *.less к веб-документу с помощью тега ;
- скачать скрипт или получить на официальном сайте LESS ссылку на сеть доставки контента (CDN).
При этом компиляция LESS в CSS будет происходить «на лету» в веб-браузере пользователя. Этот способ наиболее простой, но чаще используется в небольших веб-документах, так как их обработка не занимает много времени. Также он применяется на стадиях разработки и отладки проекта, когда результат компиляции важнее ее скорости.
На стороне сервера. В этом случае для работы с LESS-файлами понадобится установить платформу Node.js, которая расширяет узкоспециализированный JavaScript до языка общего назначения. Также необходимо предварительно скачать less-пакет с помощью менеджера пакетов npm. Далее с помощью Node.js LESS-файл компилируется в CSS, который подключается непосредственно к HTML-документу. Данный способ может показаться более сложным, зато он дает больше возможностей и, кроме того, позволяет не компилировать CSS-файл каждый раз при загрузке страницы, тем самым ускоряя ее.
С помощью сторонних компиляторов. Для разных операционных систем существуют различные платформы-компиляторы, с помощью которых можно создавать и подключать LESS-файлы к веб-документу. Например, для ОС Microsoft Windows это Winless, а для MacOS — LESS.app. Такие приложения не просто компилируют LESS-файл в CSS, но и автоматизируют многие операции при создании самого кода.
Различия между LESS и другими CSS-препроцессорами
Наиболее распространенными аналогами LESS являются два препроцессора — SASS и Stylus. SASS был разработан раньше, в 2007 году, и точно так же, как и первая версия LESS, написан на Ruby. Его преимущество заключается в более широком встроенном функционале, который можно дополнительно расширить с помощью подключаемой библиотеки Compass. Сам SASS бывает двух типов:
- Непосредственно SASS, использующий устаревший синтаксис;
- SCSS, синтаксис которого имеет много сходств с традиционным CSS.
Другой популярный препроцессор Stylus был разработан позже, в 2010 году, сразу на JavaScript (LESS перешел на JS только начиная со второй версии). Хотя на данный момент он менее популярен по сравнению со своими более старшими собратьями, специалисты считают его перспективным благодаря его максимальной простоте и удобству. В частности, в его синтаксисе, в целом похожем на CSS, отсутствуют характерные фигурные скобки и прочие знаки препинания.
Также существуют способы компиляции LESS с помощью различных редакторов и сред разработки, которые могут иметь встроенные инструменты для работы с такими файлами или возможность подключения соответствующих плагинов. Недостаток этого метода в том, что зачастую приходится подключать несколько дополнительных библиотек. Зато среды разработки существенно расширяют возможности разработчика за счет более разнообразных функций.
LESS — удобный язык для работы со стилями, пользующийся заслуженной популярностью среди разработчиков за счет своей простоты и низкого порога вхождения, достаточно широкого арсенала средств создания, отладки и компиляции кода. Поэтому он часто рекомендуется как эффективный инструмент верстки веб-документов, пригодный для работы как с небольшими, так и с крупными проектами. Кроме того, совместимость его синтаксиса с традиционным CSS существенно упрощает освоение LESS. Тем не менее, при реализации некоторых крупных проектов его функционала может не хватить, но всегда есть возможность подключить дополнительные расширения.
Frontend-разработчик
Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.
SASS против LESS с точки зрения новичка
Благодаря Compass в SASS вы можете превратить данный код:
В LESS вам такое не повторить.
@extend
SASS, в отличие от LESS, не просто копирует свойства в новый селектор, а меняет его название. Например:
.selector-b < /* Какой-то текст */ @extend .selector-a; >
Будет скомпилировано в это:
.selector-b < /* Какой-то текст */ >
Как по мне — так гораздо лаконичнее.
Переменные
Тут всё просто, мне как-то удобнее использовать $, который не используется в CSS, в отличии от @
Итог
Лучше познавайте SASS и не тратьте своё время на LESS — такой, достаточно простой итог.
На этом у меня всё, спасибо за внимание!
CSS-препроцессоры
Если рассматривать препроцессоры вместе с CSS, то получается картина более понятная, нежели чем рассматривать понятие препроцессора отдельно.
Определение
CSS препроцессор (от англ. CSS preprocessor) — это надстройка над CSS, которая добавляет ранее недоступные возможности для CSS, с помощью новых синтаксических конструкций.
Основная задача препроцессора — это предоставление удобных синтаксических конструкций для разработчика, чтобы упростить, и тем самым, ускорить разработку и поддержу стилей в проектах.
CSS препроцессоры преобразуют код, написанный с использованием препроцессорного языка, в чистый и валидный CSS-код.
При помощи препроцессоров вы можете писать код, который нацелен на:
- Читабельность для человека
- Структурированность и логичность
- Производительность
И это лишь малая часть того, что может дать вам препроцессор. Но не стоит забегать вперёд.
Синтаксический сахар
Перед тем, как перейти к дальнейшему рассмотрению CSS-препроцессоров, давайте обновим наш лексикон новым понятием — «синтаксический сахар».
Синтаксический сахар (от англ. syntactic sugar) — это дополнения синтаксиса языка программирования, которые не вносят каких-то существенных изменений или новых возможностей, но делают этот язык более читабельным для человека.
Синтаксический сахар вводит в язык альтернативные варианты записи заложенных в этот язык конструкций. Под альтернативными вариантами записи стоит понимать более короткие или удобные конструкции для человека, которые в конечном итоге будут преобразовываться препроцессором в исходный язык, без синтаксического сахара.
Если попытаться применить это понятие к CSS-препроцессорам, то оно, в общем случае, полностью описывает их суть. Ещё раз напомню, что основной задачей препроцессоров является упрощение и ускорение разработки, а как это ещё можно сделать, если не ввести альтернативные варианты записи?
Какие бывают CSS-препроцессоры?
Пора перейти к более конкретным примерам, а именно к самим CSS-препроцессорам. На момент написания книги можно выделить три популярных препроцессора:
И несколько незначительных для нас игроков:
- Closure Stylesheets
- CSS Crush
О первой тройке мы поговорим отдельно немногим ниже, а вот о двух последних разговора вообще не будет, в виду их непопулярности. При желании, описания этих препроцессоров с лёгкостью можно найти в поисковике.
Какой смысл использования препроцессоров?
Как я уже отметил выше, основные плюсы — это читабельность кода, структурирование и повышение производительности.
Существуют также и другие причины того, чтобы начать использовать препроцессор уже сегодня. Я хочу заострить на этом внимание, так как разработчики раньше, да многие и сейчас, отнекиваются от использования препроцессоров, находя их сложными, непонятными и ненужными.
CSS — это сложно
Стандартный CSS — это сложно. Синтаксис без использования вложенности, которую предлагают CSS-препроцессоры, просто напросто сложен для зрительного восприятия. Кроме того, нужно помнить имя родителя при вложенности. Отсутствие нормальных переменных и «функций» делает CSS-код грязным и узконаправленным.
Доступная документация
Прошли те времена, когда документация от препроцессоров была доступна только людям «в теме». Сейчас любой желающий может в кратчайшие сроки освоить любой из препроцессоров, причём с минимальными затратами сил.
Простота использования
Использовать препроцессоры стало проще, чем раньше, причём намного проще. Для этого нужно лишь установить программу, которая будет следить за файлами, предназначенными для препроцессора, и при их изменении будет компилировать содержимое этих файлов в чистый CSS-код.
Для более продвинутых пользователей есть специальные сборщики проектов. Не думайте, что если вы используете программу для препроцессоров, а не сборщик проектов, то вы недостаточно круты. На самом деле, такие сборщики предлагают полный контроль и расширенные настройки, а не делают из вас джедая.
Структура и логичность кода
Самым популярным предлагаемым функционалом любого CSS-препроцессора является возможность вкладывать селекторы друг в друга. Я не буду сейчас приводить пример, так как о возможностях Less, включая вложенность, будет написана соответствующая часть книги. На этом этапе вам стоит знать лишь то, что при использовании препроцессоров, можно вкладывать один селектор в другой, а другой в третий, получая что-то, похожее на оглавление книги:
1. Родительский селектор 1.1. Вложенный селектор 1.2. Вложенный селектор 1.2.1. Вложенный селектор 1.3. Вложенный селектор Конечно, в реальной жизни селекторы не могут начинаться с цифр, однако, для проведения параллели между вложенностью и оглавлением, думаю такое упущение здесь уместно.
Примеси
Если говорить совсем кратко, то, используя примеси (от англ. Mixins), можно сделать код переиспользуемым. Это помогает избежать вспомогательных классов в разметке или дублирования свойств от селектора к селектору.
Модульность
Еще одним бонусом, который прямо сейчас уговорил бы меня начать пользоваться CSS-препроцессором, будет возможность вкладывать файлы в файлы, то есть проще говоря, производить конкатенацию файлов в заданной последовательности. Да, это можно организовать и на чистом CSS, но вкупе с другими возможностями получается очень мощный инструмент.
При этом мы получаем возможность делиться модулями (библиотеками примесей), которые создали для своих нужд и посчитали полезными для других людей. Получается, что любой разработчик может загрузить вашу библиотеку и использовать её в своих целях, вызывая по мере необходимости написанные вами примеси.
Почему бы не подождать развития CSS?
Развитие CSS идёт очень маленькими и неуверенными шагами, так как W3C придерживается приоритета скорости срабатывания CSS (производительности). С одной стороны это правильно и очень важно, но с другой — это отсутствие удобства для разработчиков.
В пример поставлю одну из спецификаций CSS4, которую ввели под давлением разработчиков — селектор по родителю. Столь долгий путь от идеи до принятия решения был из-за того, что W3C считало такой селектор медленным и дальнейшее его использование на сайтах привело бы к диким тормозам. Конечно же, речь идёт о повсеместном применении этого селектора, а не о единичных случаях.
Так что не стоит ждать в ближайшее время революций и изменений, способных затмить функционал и возможности CSS-препроцессоров.
Разновидности препроцессоров
Разумеется, как и в любой другой области, всегда есть конкуренция, и на рынке препроцессоров сейчас три главных, враждующих между собой лагеря:
Враждующими я их называю, потому что каждый приверженец одного из препроцессоров считает своим долгом поливать нечистотами представителей других, скажем так, конфессий. Такая неприязнь особенно часто проявляется у любителей препроцессора Sass, который считается старейшим и мощнейшим из всех трёх препроцессоров.
Для полной картины, я хочу привести краткую справку по каждому препроцессору:
Less
Собственно, герой этой книги. Самый популярный на момент написания книги препроцессор. Основан в 2009 году Алексис Сельер (Alexis Sellier) и написан на JavaScript (изначально был написан на Ruby, но Алексис вовремя сделал правильный шаг). Имеет все базовые возможности препроцессоров и даже больше, но не имеет условных конструкций и циклов в привычном для нас понимании. Основным плюсом является его простота, практически стандартный для CSS синтаксис и возможность расширения функционала за счёт системы плагинов.
Sass (SCSS)
Самый мощный из CSS-препроцессоров. Имеет довольно большое сообщество разработчиков. Основан в 2007 году как модуль для HAML и написан на Ruby (есть порт на C++). Имеет куда больший ассортимент возможностей в сравнении с Less. Возможности самого препроцессора расширяются за счёт многофункциональной библиотеки Compass, которая позволяет выйти за рамки CSS и работать, например, со спрайтами в автоматическом режиме.
Имеет два синтаксиса:
- Sass (Syntactically Awesome Style Sheets) — упрощённый синтаксис CSS, который основан на идентации. Считается устаревшим.
- SCSS (Sassy CSS) — основан на стандартном для CSS синтаксисе.
Stylus
Самый молодой, но в тоже время самый перспективный CSS-препроцессор. Основан в 2010 году небезызвестной в наших кругах личностью TJ Holowaychuk. Говорят, это самый удобный и расширяемый препроцессор, а ещё он гибче Sass. Написан на JavaScript. Поддерживает уйму вариантов синтаксиса от подобного CSS до упрощённого (отсутствуют : , ; , <> и некоторые скобки).