—»     —»   Изучаем LESS: Разделяй и властвуй!
  Раздел: Образование и Изучение, CSS/Style Sheets   Комментариев: 2  

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

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

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

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

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

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

Настройка проекта

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

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

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

Перед тем как сделать это, давайте создадим несколько LESS-файлов, и научимся модулировать код таким образом, чтобы в конце мы могли все аккуратно собрать вместе.

Создание файлов LESS

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

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

Итак, давайте перейдем к отправной точке – файлу style.less.

// Style.less for Project LESS
// ---------------------------

/*
This is a project/blog for DeveloperDrive.com
written by Alex Ball.
Version 1.0.1

These are regular CSS comments that will be compiled normally.
*/

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

// ==========================================================

// 320 and Up by Andy Clarke
// Version: 3.0
// URL: http://stuffandnonsense.co.uk/projects/320andup/
// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0

// ==========================================================

/* Reset */

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin : 0; padding : 0; border : 0; outline : 0; font-size : 100%;
vertical-align : baseline; background : transparent; }

article, aside, figure, footer, header, hgroup, nav, section { display : block; }

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

// Style.less for Project LESS
// ---------------------------

/*
This is a project/blog for DeveloperDrive.com
written by Alex Ball.
Version 1.0.1

These are regular CSS comments that will be compiled normally.
*/

// Import reset.less
@import "reset.less";

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

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

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

Variables.less

// Variables for LESS Project
// --------------------------

// Because this code is only variables
// I do not need to add any CSS comments
// because this code will only be compiled
// into other parts of our styles.

// Colors
// ------

@red: #CF142B;
@blue: #00214D;
@white: #FFF;
@black: #000;
@lighterGray: #DDD;
@lightGray: #AAA;
@darkGray: #888;
@darkerGray: #222;

// Fonts
// -----

@baseFont: Helvetica, Arial, sans-serif;
@baseFontSize: 14px;
@baseLineHeight: 21px;

и Typography.less

// Typography
// ----------

/* Basic Typography for Project LESS */

body {
font-family: @baseFont;
font-size: @baseFontSize;
line-height: @baseLineHeight;
}

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

Вот наш обновленный файл style.less с необходимыми включениями:

// Style.less for Project LESS
// ---------------------------

/*
This is a project/blog for DeveloperDrive.com
written by Alex Ball.
Version 1.0.1

These are regular CSS comments that will be compiled normally.
*/

// Import Reset
@import "reset.less";

// Import Variables
@import "variables.less";

// Site Specific Elements
@import "typography.less";

Наша финальная скомпилированная версия оказалась немного объемной для того, чтобы опубликовать ее на странице, поэтому мы включили все файлы примеров в архив для скачивания.

Надеемся, что вам понравилась эта часть нашей серии, посвященной изучению LESS. Последняя часть раскроет вам секреты применения LESS на практике. До встречи!

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

Ключевые тэги: CSS, LESS
Опубликовал Design FactoRy   Прочитано (раз): 5858   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 5 сентября 2012 @ 17:11
Написал: Виталий — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Огромное спасибо за эту серию! Вы действительно Cool Webmasters, ребята!
Комментарий #2: 5 сентября 2012 @ 21:08
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3324   |   Комментариев: 500
ICQ: --- не указано ---
Виталий, благодарим!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


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







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