less

LESS CSS — Пытаемся разобраться.

06.03.2016

«Это как стеройды для веб разаработки»

incident57.com

 

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

 

maxresdefault

 

Сравнение Less и классического CSS

 

lesscss

 

В основном существуют три больших игрока это конечно же LESS, Sass и Stylus. Они все в своем роде прикрасны, но мы сегодня рассмотрим LESS так как на сегодгяшний момент н является самым популярным в среде профессиональной разработки. Написан он в далекам 2009 году программистом Алексисом Сельером, написан он на чистом JavaScript, но изначально Алексис написал его на Ruby, через некоторое время разработчик понял что пора переписывать код и сделал правельный выбор.

 

sass-установка

 

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

 

Компилятор

 

Без настройки компилятора никак, ведь согласно спецификациям W3C, браузер не сможет обрабатывать и визуализировать наш красивый код.

Вот как выглядит код на less:

 

 

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

 

 

Использование JavaScript

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

 

 

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

 

 

При помощи командной строки (lessc)

Для компиляции из командной строки нам понадобится установленный node.js, и так же понадобитс яглобально установенный пакет less  для этого ав терминале провисываем:

 

 

Команды выполняются оченбь легко, вот например:

Чтобы скомпилировать фаил с именем _fofoi.less и не сохранить результаты мы вводим:

 

 

А чтобы скомпилировать фаил _fofoi.less и сохранить в се результы в фаил _main.css мы пишим следующую строчку:

 

 

Все очень легко и интуитивно способствует продуктивной работе.

 

Компиляция при помощи Task Runner

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

На сегодняшний момент есть два лидера это Grunt и Gulp. Первый чуть постарше второй чуть помоложе но именно они ведут борьбу на поле универсальной разработки.

 

grunt

 

Если углубится и рассмотреть еще и Brunch в довесок с Broccoli, то их можно отнести немног к другому клаасу. Broccoli заявляет только о фронтэнд разработке и не может похвастаться тем количеством различных пакетов которые доступны для Grunt и Gulp.

 

gulp

 

Компиляция при помощи специальных приложений

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

Так давайте посмотрим, что мы имеем на сегодняшний момент, Наверное первым кандидатом будет  Mixture, прекрасный инструмент, распространяется под бесплатной лицензией  и доступен для OSX и для Windows.

 

mixture

 

Следующим тоже очень не плохим кандидатом на наше внимание является Koala, имеет приятный графический интерфейс. Тоже как и Mixture полностью бесплатный продукт, которым можно пользоваться как на OSX так и на Windows да и еще конечно же на Linux.

 

koala

 

Prepros уже является коммерческим продуктом по цене в $29. Хотя заявлнно почти обсолютно тоже что у Koala и Muxture. Также доступен а всех основных платформах OSX, Windows и Linux.

 

prepros

 

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

 

winless

 

CodeKit это уже эксклюзив для OSX, по цене $32, Забавно что CodeKit охарактеризовывают как стероды для веб разработки, ну а далее как и везде написанно что Codekit поможет вам создать веб сайт быстрее и лучше. (быстрее, выше, сильнее)))

 

codekit

 

Редактор кода

 

Для полноценным пользованием less подойдет почти любой современный редактор кода, главное установить расширения я полной поддержки синтаксиса less. В этот спимок можно включить конечноже SublimeText , Notepad ++ , VisualStudio, TextMate и Eclipse.

 

sublinetext

 

Синтаксис

 

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

 

Переменные

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

 

 

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

И тогда к нам приходит понятие переменной, переменная которая обозначается как @color-base:  может нам облегчить поиск подходящего цвета. И в итоге мы получаем такую кострукцию, кторая выглядит очень элегантно. Обычно пременные обозначают в самом начале таблицы что бы не искать их по всему коду.

 

 

Следовательно для смены цвета нам надо будет поменять лишь значение переменной и все, тоже самое можно провернуть и с другими значениями например:

 

 

Примеси

Их можно использовать кода нужно в существующую декларацию добавить еще свод правил, посмотрим пример внизу:

 

 

Мы настроили градиент класса .gradients  и когда нам понадобится использовать его в нужном месте мы посто добавляем имя класса  в конструкцию без дополнительных описаний.

 

 

В итоге мы получаем равнозначную конструкцию в классическом css как:

 

 

Получается что слой унаследовал все условия класса .gradients .

При этом если вы активно пользуетесь css3 то вы можете сократиь количество элиментов еще на порядок, что упростит ващу работу еще больше. LESS Elements упрощает работу с условиями которые вы можете использовать очень часто это например border-radius , gradients , drop-shadow  и многие другие.

Для ипользования LESS Elements вам понадобится всеголишь добавит правило в начало таблицы

 

 

В итоге это может выглядеть так:

 


 

Для более полного ознакомления советую ознакомится с документацией LESS Elements http://lesselements.com/less_elements

 

Вложенность правил

Обычно когда вы пишите код на css он может выглядеть примерно так:

 

 

А в less мы можем упростить наборы правил, вкладывая дочерние элементы в родительские. В итоге это выглядит так:

 

 

Также можно назначить псевдо-класс например :hover  используя символ (&) амперсанд. И так как это может выглядеть:

 

 

Операции

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

Например рассмотрим такой вариант Мы хотим чтобы элемент B был в два раза выше элемента A. В этом случае мы можем это описать таким способом:

 

 

Что в итоге мы наблюдаем, сначала мы добавили переменную  @height:  со значением  100px , а потом мы эту переменную присвоили обоим классам но в отличии от класса A классу B мы добавили оператор * который позволяет умножить значение 100 px еще на 2. результатом этого действия является возможность смены значения у пременной и адекватное поведение классов которые автоматически подставятся под новое значение включая операцию умножения.

 

Обьем

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

 

 

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

 

В заключение

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