Вивчаємо LESS: Розділяй і володарюй над кодом

315

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

План статей серії:

Вступ

Використання Змінних

Використання Миксинов

Використання Вкладених правил

Використання Функцій

Розділяй і володарюй

Застосування на практиці

Якщо на вашому столі стоїть чашка кави і відкритий улюблений текстовий редактор, це означає, що можна приступити до розподілу 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 для Проекту LESS
// —————————
/*
Це проект/блог для DeveloperDrive.com
Автор – Алекс Болл
Версия1.0.1
Ось як виглядають стандартні коментарі CSS, які будуть компілюватися в звичайному режимі.
*/

У цьому файлі не так вже й багато написано… поки що. Щоб перейти до наступного файлу LESS, я зазвичай відкриваю проект Енді Кларка 320 and Up і беру розроблений ним LESS-файл скидання стилів.

// ==========================================================
// 320 and Up Енді Кларка
// Версія: 3.0
// URL: http://stuffandnonsense.co.uk/projects/320andup/
// Ліцензія Apache: v2.0. http://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, назва, 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 тепер виглядає так:

// Style.less для Проекту LESS
// —————————
/*
Це проект/блог для DeveloperDrive.com
Автор – Алекс Болл
Версия1.0.1
Ось як виглядають стандартні коментарі CSS, які будуть компілюватися в звичайному режимі.
*/
// Імпортуємо reset.less
@import “reset.less”;

І ми вже бачимо, що зберігання файлів LESS окремо може значно прискорити розробку, так як у вас вже є файл скидання для кожного проекту. Немає необхідності шукати цей CSS-файл кожен раз, коли ви хочете почати проект, потрібно просто імпортувати reset.less!

Створення додаткових файлів LESS

Для цього прикладу я створив два додаткових файлу LESS –variables.less і друкарня.less.

Variables.less

// Змінні для Проекту LESS
// ————————–
// Так як в цьому коді є тільки змінні
// Мені не потрібні ніякі CSS коментарі
// тому що цей код компілюється тільки
// в інші частини наших стилів
// Кольору
/ / ——
@red: #CF142B;
@blue: #00214D;
@white: #FFF;
@black: #000;
@lighterGray: #DDD;
@lightGray: #AAA;
@darkGray: #888;
@darkerGray: #222;
// Шрифти
// —–
@добкін: Helvetica, Arial, sans-serif;
@baseFontSize: 14px;
@baseLineHeight: 21px;

І Друкарня.less

// Типографіка
// ———-
/* Базова типографіка для Проекту LESS */
body {
font-family: @добкін;
font-size: @baseFontSize;
line-height: @baseLineHeight;
}

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

// Style.less для Проекту LESS
// —————————
/*
Це проект/блог для DeveloperDrive.com
Автор – Алекс Болл
Версія 1.0.1
Ось як виглядають стандартні коментарі CSS, які будуть компілюватися в звичайному режимі.
*/
// Імпортуємо файл скидання
@import “reset.less”;
// Імпортуємо Змінні
@import “variables.less”;
// Елементи, розроблені для конкретного сайту
@import “друкарня.less”;

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

Сподіваюся, вам сподобалася ця серія статей. Остання публікація буде присвячена застосуванню LESS на практиці та його використання у роботі з реальними сайтами. До скорого!