От автора: сегодня мы завершаем серию публикаций «Изучаем LESS», мы поговорим про применение LESS в веб-разработке. Сегодняшний пост немного отличается от предыдущих тем, что мы не будем демонстрировать новые техники и примеры кода, а рассмотрим, как использовать LESS, обсудим проекты, с помощью которых вы можете начать разработку с использованием LESS и многое другое.
План статей серии:

Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видеоИспользование Вложенных правил
Применение на практике
Написание кода LESS
Если вы читали наше Введение, то знаете, что я рекомендую компилировать все файлы LESS локально, просто используя одну таблицу стилей CSS. Самые популярные программы, используемые для этого — это LESS.app и CodeKit, обе создал Incident57.
LESS.APP
LESS.app – это бесплатное приложение, которое обнаруживает все файлы LESS в веб-папке и компилирует их в CSS. Вы можете задать конкретные папки вывода и выбрать, какие именно LESS-файлы вы хотите скомпилировать (это пригодится, если вы разделили LESS на меньшие модульные файлы и импортировали их в одну таблицу стилей). Кроме этого, можно минимизировать CSS из этого приложения, сохраняя изначальный размер файла (но даже не думайте редактировать CSS файл).
CODEKIT

Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видеоCodeKit – это новое поколение приложения LESS.app, которое стоит $20 (чтобы помочь создателю выплатить кредит на обучение, так что, на самом деле, не так уж и плохо). CodeKit компилирует LESS идеально, но это еще не все. Он также компилирует файлы Sass, Stylus, Haml, Coffeescript, JavaScript и Compass. Пусть я и немного знаю об этих других типах файлов (не считая JavaScript), но… CodeKit может скомпилировать их все! Мало того, у CodeKit есть еще одно преимущество – когда пользователь сохраняет код, его браузер автоматически обновляется и отображает изменения, и все это сопровождается прикольной CSS3 анимацией.
Проекты LESS
Если вы хотите начать использовать LESS в проектах, я бы посоветовал взяться за проект с открытым кодом, который уже задействует LESS. Это лучший способ изучить данную технологию и все ее премудрости, которые опытные веб-разработчики используют в своих проектах. Я перечислю некоторые проекты, задействующие LESS, которыми я постоянно пользуюсь.
BOOTSTRAP от TWITTER
Bootstrap от Twitter – это на данный момент один из самых популярных проектов с открытым кодом, он разработан Mарком Oттo и Джейкобом из Twitter. Bootstrap – это набор HTML, CSS и JavaScript компонентов для пользовательского интерфейса и взаимодействий, включая адаптивный дизайн и такие компоненты как кнопки, формы и другое.
Bootstrap использует LESS как основу для всех стилей и разделяет их код на меньшие модульные файлы, легко читаемые и удобные в сопровождении.
Адаптивная тема WORDPRESS BONES
Если вы хотите заниматься веб-дизайном и разработкой для WordPress, я бы предложил начать с темы Bones. Существует много шаблонов WordPress для начинающих, но я думаю, вряд ли найдется что-то лучше, чем Bones от Эдди Мачадо.
Адаптивная версия Bones использует LESS, чтобы структурировать сайт WordPress посредством медиа-запросов CSS3 и определить, какой файл LESS нужно загружать в компилятор. Система довольно удобная, и если вы собираетесь работать с WordPress, то она определенно достойна внимания.
Проект 320 AND UP
320 and Up – это адаптивный шаблон в стиле «малые экраны – прежде всего». Этот проект является идеальной отправной точкой для тех, кто хочет создавать адаптивные веб-сайты, не интегрируя их с CMS. Если вы собираетесь импортировать веб-сайт на другую CMS, например, в ExpressionEngine, 320 and Up – это как раз для вас. Этот проект использует LESS для того, чтобы создать адаптивный фреймворк для стилизации начиная с малых экранов и заканчивая большими — в отличие от концепции «веб-дизайн для стационарного компьютера в первую очередь, а для экранов меньше в следующую очередь». Проект очень интересный и определенно заслуживает внимания!
Заключение
Этой публикацией мы завершаем серию статей «Изучаем LESS». Спасибо за ваше внимание, комментарии и обсуждения. Вы знаете другие проекты, которые используют LESS? Напишите о них в комментариях ниже.
Автор: Alex Ball
Источник: //www.developerdrive.com/
Редакция: Команда webformyself.

Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видео
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видео