Изучаем LESS: Применение на практике

От автора: сегодня мы завершаем серию публикаций «Изучаем 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.

Комментарии Вконтакте: