Подборка ресурсов по препроцессору Less

Введение

В этой подборке я собрал и структурировал все известные мне ресурсы по Less, которые могут помочь новичкам разобраться с этим препроцессором. Тем же, кто перерос ступень новичка, будут интересны некоторые статьи, библиотеки, а также плагины для Grunt, Gulp и Brunch. А тем, кто считает себя вершиной айсберга, я всё таки рекомендую обратить внимание на некоторые статьи, а также библиотеки.

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

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

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

• Официальный сайт — Сайт, содержащий полную информацию о препроцессоре, включая документацию, которую никто не хочет читать.
• Организация Less на GitHub — Перечень репозиториев, среди которых находится документация, сам препроцессор и плагины.

Статьи

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

• LESS CSS — Цикл статей от Appos'sum, в котором полностью описываются возможности Less. Освещаются темы переменных, примесей, комментариев, строковых шаблонов, JavaScript, компилятора для Java и PHP, а также прочих интересностей.
• LESS — ОБЗОР И УСТАНОВКА — Небольшой обзор возможностей Less на понятных примерах. В краткой форме автор проходится по основным возможностям. Удобно для тех, кто хочет посмотреть на базовый функционал препроцессора.
• LESS: программируемый язык стилей — Статья из далёкого 2012 года, в которой описываются некоторые базовые возможности языка. Это перевод статьи на webdesign.tuts+, написанной в конце 2011 года.
• Почему стоит использовать LESS при верстке сайта? — Галич Сергей рассказывает о том, почему «LESS это ЗБС». Сергей в юморной форме рассказывает о личном опыте и советует начать использовать CSS-препроцессоры.
• A Comprehensive Introduction to LESS: Mixins — Введение в примеси препроцессора. В этой объёмной статье подробно рассматриваются реализации различных видов примесей на Less.
• Расширение возможностей CSS с помощью LESS — Упрощение разработки стилей адаптивного дизайна для современных Web-страниц.
• Препроцессор LESS — динамический CSS — Небольшая статья и скринкаст о препроцессоре Less от LoftBlog. Говорят о том, что препроцессоры сохраняют время и даже нервы.
• DON’T READ this Less CSS tutorial (highly addictive) — Автор повествует о том, как хорош CSS-препроцессор в повседневной разработке. А ещё предупреждает, что эта статья заряжает на использование препроцессоров.
• 3 новых LESS/CSS-свойства, о которых вам следует знать — Немного подробнее о группе селекторов, импорте файлов и склейке свойств. Стоит почитать, если вы планируете писать что-то сложнее Hello World.
• Несколько советов less-разработчику — Неплохие советы для начинающих. Но всё же это больше похоже на констатацию фактов, которые должны быть известны всем.
• Малоиспользуемые, но от этого не менее прекрасные возможности LESS — В этой статье ведётся речь о малоиспользуемых возможностях Less, которые я использую очень часто. Советую к прочтению.
• Работа и манипуляции с цветом в LESS — Галич Сергей хочет поделиться с нами знаниями модели HLS и о том, как он работал с цветами и градиентами макета вместе с Less.
• LESS IMPORT OPTIONS — Опции доступные для импорта Less-файлов. Из статьи вы узнаете, что у директивы @import есть аж шесть опций.
• Working With LESS and the Chrome DevTools — Работа с Less прямиком в Chrome DevTools. Такой опыт необходим для отладки кода на Less прямиком в браузере.
• Исполнение JavaScript кода с помощью LESS CSS препроцессора — Описание того, как использовать JavaScript в Less файлах для большего контроля над Less-кодом. Кстати, реальные примеры можно посмотреть в библиотеке Less Hat.
• Медиа-запросы вместе с Less — Рассказ о некоторых вариантах организации удобного использования медиа-запросов.
• Невероятный препроцессор Less — Статья, рассказывающая о том, какие возможности скрываются в Less.

Сборники

Подборки, в которых есть что-то интересное для Less разработчиков.

• The LESS Mixins That You Need If You Use This Preprocessor — Подборка библиотек примесей.
• Frameworks Based On Less CSS Preprocessor — Подборка фреймворков, основанных на Less.
• Tools And Apps For LESS CSS Preprocessor — Подборка инструментов для работы с Less.
• Less CSS Preprocessor Toolbox — Подборка инструментов для работы с Less.
• Best Less Tutorials : A Comprehensive Guide To LESS

Сравнение препроцессоров

Некоторые люди пишут статьи, в которых пытаются сравнивать Less с другими препроцессорами.

• CSS PRE - CSS PREprocessors — Самый интересный ресурс для тех, кто не может выбрать какой CSS-препроцессор он будет использовать.
• Sass vs. LESS — Статья 2012 года, в которой сравниваются базовые возможности препроцессоров.
• WHY I SWITCHED FROM LESS TO SASS — Hugo рассказывает нам о том, почему он перешёл с Less на Sass.
• An Introduction to CSS Pre-Processors: SASS, LESS and Stylus — Сравнение базовых возможностей Less, Sass и Stylus.
• Разбираемся в отличиях препроцессоров CSS
• LESS vs Sass? It’s time to switch to Sass

Книги

Очень интересные книги, исходя из оглавления. Особенно приглянулись «Learning Less.js» и «Less Web Development Cookbook». Нужно прикупить — стоимость их довольно демократична. Хотя, если не хочется тратить деньги, то можно поискать их в поисковике, две из четырёх там точно есть. Но учтите, что этого я вам не говорил :)

• Instant LESS CSS Preprocessor How-to
• Less Web Development Essentials
• Learning Less.js
• Less Web Development Cookbook

Курсы

Различные курсы, которые помогут новичкам ознакомиться с некоторыми возможностями препроцессора.

• Курс «Знакомство с LESS» — Курс для новичков от HTML Academy.
• Less is More — Курс от tuts+.
• Launch into LESS — Небольшой курс от Learnable.

Программы

Самым простым способом транслировать Less в CSS является использование специализированных программ. Здесь вы не увидите программ, подобных SimpleLess, которые в прямом смысле остались в прошлом, так как давно не обновлялись и не перешли на Less 2.0, а также программы, заточенные только под одну ОС.

• Prepros — Мощнейший инструмент, поддерживающий все современные препроцессоры, некоторые инструменты для работы и оптимизации.
• Koala — Альтернатива Prepros с той лишь разницей, что поддерживается меньшее количество препроцессоров и инструментов. Взамен предлагается система плагинов. К сожалению, автор очень вяло развивает свой проект.
• Mixture — Мощный инструмент, который включает в себя все популярные препроцессоры, инструменты для оптимизации, шаблоны проектов и генератор статистических сайтов. С недавних пор имеет бесплатную версию, но не имеет поддержки Linux.
• LiveReload — Автоматическое обновление браузера при изменении ресурсов проекта с возможностью включения компиляторов популярных препроцессоров.
• CodeKit — Комплексное решение для OS X. Сделал исключение в виду того, что это действительно качественная альтернатива Prepros. Если быть честным, то не CodeKit альтернатива Prepros, а Prepros альтернатива Codekit. Единственный минус — дорого с нынешним курсом.
• CrunchApp — Редактор, специализированный на написании Less-кода. К сожалению, написан с применением технологии Adobe Air, из-за которой вытекает уйма минусов и отсутствие поддержки Linux.

Плагины для систем сборок

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

• grunt-contrib-less
• gulp-less
• less-brunch

Не вижу смысла использовать CSS-препроцессор без автоматической расстановки префиксов.

• grunt-autoprefixer
• gulp-autoprefixer
• autoprefixer-brunch

А ещё я бы посоветовал использовать какой-нибудь анализатор CSS для предотвращения фейспалмов. К сожалению, плагины для Grunt и Gulp разные, а Brunch в пролёте. Плагины lesslint и recess однородны по функционалу, а grunt-contrib-csslint и gulp-csslint вообще близнецы. Роли это никакой важной не играет — жить можно и без анализатора кода.

• grunt-lesslint
• grunt-contrib-csslint
• gulp-recess
• gulp-csslint

Библиотеки

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

• Less Hat — Библиотека, необходимая для тех, кто не хочет пользоваться Autoprefixer.
• More or Less — Библиотека, включающая в себя примеси для построения привычных условных конструкций и циклов. Помимо этого есть примеси для другого специфичного функционала.
• Less MQ — Примеси для удобного использования медиа-запросов.
• Hamburger Icon — Генератор иконки гамбургера, которая используется для адаптивного меню.
• Quantity queries mixins for LESS — Библиотека примесей, основанная на идее, озвученной в статье Quantity Queries for CSS.
• Bellmaker — Библиотека медиа-запросов под конкретные устройства.

Фреймворки

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

• Bootstrap
• Kube
• ConciseCSS — Есть версия на Less.
• uikit
• Semantic UI
• Cardinal
• Metro Ui

Итоги

Я нахожу это полезным материалом. А вам интересны такие подборки?