От автора: итак, мы плавно подошли к концу серии «Изучаем LESS», и эта тема — моя любимая. Одной из самых лучших особенностей является то, что можно сделать LESS код модульным и организованным, при этом не засорять сайты (если вы компилируете его посредством LESS.app, CodeKit или других компиляторов).
План статей серии:
Если на вашем столе стоит чашечка кофе и открыт любимый текстовый редактор, это значит, что можно приступить к разделению LESS и приведению кода в аккуратный вид.
Подготовка проекта
Каждый раз, когда я собираюсь начать проект с нуля при помощи LESS, я задаю простую структуру папок.
Как видите, LESS и CSS – это отдельные папки. Следующий шаг – это добавить проект в приложение LESS.app (или CodeKit, если хотите). LESS.app автоматически найдет все файлы LESS в папке сайта и подготовит их к компилированию. Но прежде, чем делать это, давайте создадим несколько файлов LESS и рассмотрим, как модулировать код и свести все воедино.
Создание нескольких файлов LESS
Самый первый файл LESS, который я создаю в любом проекте, это простой style.less. Он будет компилирован в файл style.css и выступать в качестве основного файла CSS для всего проекта.
Главное помнить, что комментарии в LESS обозначаются двойным обратным слешем (//) и не компилируются в финальный CSS. Обычные комментарии CSS (*/ … /*) компилируются как комментарии и могут быть использованы в качестве организационных или стандартных комментариев.
И все таки, давайте посмотрим на отправной файл style.less.
|
1 2 3 4 5 6 7 8 9 10 |
// Style.less для Проекта LESS // --------------------------- /* Это проект/блог для DeveloperDrive.com Автор – Алекс Болл Версия1.0.1 Вот как выглядят стандартные комментарии CSS, которые будут компилироваться в обычном режиме. */ |
В этом файле не так уж и много написано… пока что. Чтобы перейти к следующему файлу LESS, я обычно открываю проект Энди Кларка 320 and Up и беру разработанный им LESS-файл сброса стилей.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// ========================================================== // 320 and Up Энди Кларка // Версия: 3.0 // URL: //stuffandnonsense.co.uk/projects/320andup/ // Лицензия Apache: v2.0. //www.apache.org/licenses/LICENSE-2.0 // ========================================================== /* Сброс*/ 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. Нам нужно включить файл сброса в финальный, так? Все, что нужно сделать, это импортировать его в одной строке кода. Наш улучшенный style.less теперь выглядит так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Style.less для Проекта LESS // --------------------------- /* Это проект/блог для DeveloperDrive.com Автор – Алекс Болл Версия1.0.1 Вот как выглядят стандартные комментарии CSS, которые будут компилироваться в обычном режиме. */ // Импортируем reset.less @import "reset.less"; |
И мы уже видим, что хранение файлов LESS отдельно может значительно ускорить разработку, так как у вас уже есть файл сброса для каждого проекта. Нет необходимости искать этот CSS-файл каждый раз, когда вы хотите начать проект, нужно просто импортировать reset.less!
Создание дополнительных файлов LESS
Для этого примера я создал два дополнительных файла LESS –variables.less и typography.less.
Variables.less
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// Переменные для Проекта LESS // -------------------------- // Так как в этом коде есть только переменные // Мне не нужны никакие CSS комментарии // потому что этот код компилируется только // в другие части наших стилей // Цвета // ------ @red: #CF142B; @blue: #00214D; @white: #FFF; @black: #000; @lighterGray: #DDD; @lightGray: #AAA; @darkGray: #888; @darkerGray: #222; // Шрифты // ----- @baseFont: Helvetica, Arial, sans-serif; @baseFontSize: 14px; @baseLineHeight: 21px; |
И Typography.less
|
1 2 3 4 5 6 7 8 9 10 |
// Типографика // ---------- /* Базовая типографика для Проекта LESS */ body { font-family: @baseFont; font-size: @baseFontSize; line-height: @baseLineHeight; } |
После того, как мы создали два файла, нам остается только импортировать их в файл style.less, сохранить, и эти файлы магическим образом скомпилируются друг с другом в один style.css. Ниже представлена улучшенная версия style.less с импортированными ресурсами:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Style.less для Проекта LESS // --------------------------- /* Это проект/блог для DeveloperDrive.com Автор – Алекс Болл Версия 1.0.1 Вот как выглядят стандартные комментарии CSS, которые будут компилироваться в обычном режиме. */ // Импортируем файл сброса @import "reset.less"; // Импортируем Переменные @import "variables.less"; // Элементы, разработанные для конкретного сайта @import "typography.less"; |
Финальная скомпилированная версия слишком длинная, чтобы публиковать ее здесь, но вы можете скачать все примеры файлов и ознакомиться с конкретными файлами LESS, файлом style.less и скомпилированным файлом style.css.
Надеюсь, вам понравился эта серия статей. Последняя публикация будет посвящена применению LESS на практике и его использованию в работе с реальными сайтами. До скорого!
Автор: Alex Ball
Источник: //www.developerdrive.com/
Редакция: Команда webformyself.
