Изучаем LESS: Разделяй и властвуй над кодом

Изучаем LESS: Разделяй и властвуй над кодом

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

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

Вступление

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

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

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

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

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

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

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

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

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

Если на вашем столе стоит чашечка кофе и открыт любимый текстовый редактор, это значит, что можно приступить к разделению LESS и приведению кода в аккуратный вид.

Подготовка проекта

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

Изучаем LESS: Разделяй и властвуй над кодом

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

Создание нескольких файлов LESS

Самый первый файл LESS, который я создаю в любом проекте, это простой style.less. Он будет компилирован в файл style.css и выступать в качестве основного файла CSS для всего проекта.

Главное помнить, что комментарии в LESS обозначаются двойным обратным слешем (//) и не компилируются в финальный CSS. Обычные комментарии CSS (*/ … /*) компилируются как комментарии и могут быть использованы в качестве организационных или стандартных комментариев.

И все таки, давайте посмотрим на отправной файл style.less.

В этом файле не так уж и много написано… пока что. Чтобы перейти к следующему файлу LESS, я обычно открываю проект Энди Кларка 320 and Up и беру разработанный им LESS-файл сброса стилей.

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

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

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

Внимание! Теперь мы добрались до самой прелести LESS. Нам нужно включить файл сброса в финальный, так? Все, что нужно сделать, это импортировать его в одной строке кода. Наш улучшенный style.less теперь выглядит так:

И мы уже видим, что хранение файлов LESS отдельно может значительно ускорить разработку, так как у вас уже есть файл сброса для каждого проекта. Нет необходимости искать этот CSS-файл каждый раз, когда вы хотите начать проект, нужно просто импортировать reset.less!

Создание дополнительных файлов LESS

Для этого примера я создал два дополнительных файла LESS –variables.less и typography.less.

Variables.less

И Typography.less

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

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

Надеюсь, вам понравился эта серия статей. Последняя публикация будет посвящена применению 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