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

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

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

План статей серии:

Вступление

Использование Переменных

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

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Использование Вложенных правил

Использование Функций

Разделяй и властвуй

Применение на практике

Написание кода LESS

Если вы читали наше Введение, то знаете, что я рекомендую компилировать все файлы LESS локально, просто используя одну таблицу стилей CSS. Самые популярные программы, используемые для этого — это LESS.app и CodeKit, обе создал Incident57.

LESS.APP

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

LESS.app – это бесплатное приложение, которое обнаруживает все файлы LESS в веб-папке и компилирует их в CSS. Вы можете задать конкретные папки вывода и выбрать, какие именно LESS-файлы вы хотите скомпилировать (это пригодится, если вы разделили LESS на меньшие модульные файлы и импортировали их в одну таблицу стилей). Кроме этого, можно минимизировать CSS из этого приложения, сохраняя изначальный размер файла (но даже не думайте редактировать CSS файл).

CODEKIT

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

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

CodeKit – это новое поколение приложения LESS.app, которое стоит $20 (чтобы помочь создателю выплатить кредит на обучение, так что, на самом деле, не так уж и плохо). CodeKit компилирует LESS идеально, но это еще не все. Он также компилирует файлы Sass, Stylus, Haml, Coffeescript, JavaScript и Compass. Пусть я и немного знаю об этих других типах файлов (не считая JavaScript), но… CodeKit может скомпилировать их все! Мало того, у CodeKit есть еще одно преимущество – когда пользователь сохраняет код, его браузер автоматически обновляется и отображает изменения, и все это сопровождается прикольной CSS3 анимацией.

Проекты LESS

Если вы хотите начать использовать LESS в проектах, я бы посоветовал взяться за проект с открытым кодом, который уже задействует LESS. Это лучший способ изучить данную технологию и все ее премудрости, которые опытные веб-разработчики используют в своих проектах. Я перечислю некоторые проекты, задействующие LESS, которыми я постоянно пользуюсь.

BOOTSTRAP от TWITTER

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

Bootstrap от Twitter – это на данный момент один из самых популярных проектов с открытым кодом, он разработан Mарком Oттo и Джейкобом из Twitter. Bootstrap – это набор HTML, CSS и JavaScript компонентов для пользовательского интерфейса и взаимодействий, включая адаптивный дизайн и такие компоненты как кнопки, формы и другое.

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

Адаптивная тема WORDPRESS BONES

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

Если вы хотите заниматься веб-дизайном и разработкой для WordPress, я бы предложил начать с темы Bones. Существует много шаблонов WordPress для начинающих, но я думаю, вряд ли найдется что-то лучше, чем Bones от Эдди Мачадо.

Адаптивная версия Bones использует LESS, чтобы структурировать сайт WordPress посредством медиа-запросов CSS3 и определить, какой файл LESS нужно загружать в компилятор. Система довольно удобная, и если вы собираетесь работать с WordPress, то она определенно достойна внимания.

Проект 320 AND UP

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

320 and Up – это адаптивный шаблон в стиле «малые экраны – прежде всего». Этот проект является идеальной отправной точкой для тех, кто хочет создавать адаптивные веб-сайты, не интегрируя их с CMS. Если вы собираетесь импортировать веб-сайт на другую CMS, например, в ExpressionEngine, 320 and Up – это как раз для вас. Этот проект использует LESS для того, чтобы создать адаптивный фреймворк для стилизации начиная с малых экранов и заканчивая большими — в отличие от концепции «веб-дизайн для стационарного компьютера в первую очередь, а для экранов меньше в следующую очередь». Проект очень интересный и определенно заслуживает внимания!

Заключение

Этой публикацией мы завершаем серию статей «Изучаем LESS». Спасибо за ваше внимание, комментарии и обсуждения. Вы знаете другие проекты, которые используют LESS? Напишите о них в комментариях ниже.

Автор: Alex Ball

Источник: http://www.developerdrive.com/

Редакция: Команда webformyself.

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

Метки:

Похожие статьи:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree