—»     —»   Изучаем LESS: Применяем на практике
  Раздел: Образование и Изучение, CSS/Style Sheets   Нет комментариев  

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

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

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

Если вы не читали 6 наших предыдущих статей, то мы настоятельно рекомендуем вам ознакомиться с ними:

Изучаем LESS: введение
Изучаем LESS: Использование переменных
Изучаем LESS: Mixin'ы
Изучаем LESS: Вложенные правила
Изучаем LESS: Использование функций
Изучаем LESS: Разделяй и властвуй!

Разработка кода с помощью LESS

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

LESS.app

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

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

CodeKit

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

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

Проекты в LESS

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

Bootstrap от Twitter

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

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

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

Адаптивный шаблон для Wordpress Bones

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

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

Адаптивная версия Bones использует LESS для структурирования адаптивно-оформленного сайта на Wordpress, где при помощи CSS3 media queries определяется, какой LESS-файл следует загружать в компилятор. Очень хитрая система, которая идеально подойдет вам, если вы работаете с WP.

Проект 320 and Up

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

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

Проект использует LESS для создания адаптивной платформы стилизации, начиная от маленьких экранов и выше. Очень интересный концепт, с которым точно стоит познакомиться!

В завершение

На этом мы завершаем нашу серию статей, посвященных изучению LESS. Огромное спасибо вам за чтение и комментарии.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, LESS
Опубликовал Design FactoRy   Прочитано (раз): 7355   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031