Изучаем LESS: Разделяй и властвуй!
9 июля 2012, 13:25. Разместил: Design FactoRy
Снарядитесь чашечкой кофе, вашим любимым текстовым редактором, и давайте же приступим к изучению того, как разделять наш LESS-код таким образом, чтобы все было чисто и аккуратно.
Если вы не читали 5 наших предыдущих статей, то мы настоятельно рекомендуем вам ознакомиться с ними:
Изучаем LESS: введение
Изучаем LESS: Использование переменных
Изучаем LESS: Mixin'ы
Изучаем 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-архив
Внимание! У вас нет прав для просмотра скрытого текста.
Вернуться назад