Від автора: Можливо, ви вже стикалися з поняттям «CSS препроцесор», але не стали його вивчати, бо це здалося вам складним чи ви подумали, що доведеться вивчити тонни нового синтаксису. І хоча це може виявитися правдою, ви все одно здатні налаштуватися на потрібний лад і дуже легко почати користуватися кількома базовими перевагами чого-небудь на зразок LESS.
Суперечки навколо LESS і SASS ніколи не змовкають, а ви просто візьміть і виберіть один із них сьогодні ввечері і почніть користуватися ним. Особисто я почав використовувати LESS, тому що на той момент це було єдине, що підтримувалося фреймворком Bootstrap, а ви могли помітити, що я є прихильником цього фреймворку. Я також помітив, що почати використовувати LESS набагато легше з допомогою less.js.
Використання less.js
less.js – це невеликий скрипт, який вам потрібно підключити в області head вашого файлу, і він автоматично скомпилирует ваш LESS код в звичайний охайний CSS. Він повністю підходить для процесу розробки, але не слід їм користуватися для кінцевої версії проекту.
Для початку зайдіть на сайт lesscss.org і скачайте less.js. Після того як ви завантажите zip-архів, розпакуйте його і помістіть JavaScript файл в папку з вашим проектом, бажано в папку /js. Тепер відкрийте один з ваших HTML файлів і вставте наступний рядок:
<script src=”path-to/less.js” type=”text/javascript”></script>
Тепер ваша сторінка готова до компіляції LESS файлів. Далі вам необхідно додати посилання на ваш LESS файл в області head вашого документа. Переконайтеся, що ви розмітили посилання до рядка з less.js. Ви підключаєте ваш LESS файл точно також як і звичайний CSS файл за одним винятком. Переконайтеся, що атрибута rel ви вказали наступне rel=»stylesheet/less».
<link rel=”stylesheet/less” href=”path to/styles.less”>
Тепер, коли ви підключите less.js і таблицю стилів LESS, шаблон вашої сторінки підходить для використання LESS. Давайте розглянемо декілька простих речей, якими ви зможете скористатися завдяки препроцессору.
Змінні
Мабуть, саме просте і корисне, що дає вам LESS, – це використання змінних. Для того, щоб оголосити змінну в LESS, вам потрібно написати символ”@”, а потім ключове слово. Давайте оголосимо кілька змінних для кольору, в якості прикладу:
@blue
@red
@black
@white
Оголошення імені змінної – це лише перший крок. Потім вам потрібно кожній змінній присвоїти значення. Давайте додамо кілька значень кольору, використовуючи шістнадцяткову форму запису (hex).
@blue: #00f;
@red: #c00;
@black: #000;
@white: #fff;
Тепер, після оголошення даних змінних, ми можемо використовувати їх в будь-якому місці нашої таблиці стилів. Переконайтеся, що ви прописали змінні в самому верху таблиці стилів, до використання яких-небудь селекторів, класів або ідентифікаторів (id). Хорошою ідеєю буде скопіювати всі змінні і помістити їх в окрему таблицю стилів, давши їй яку-небудь назву, наприклад, lib.less (скорочено від англійського слова library – бібліотека). Використовуйте правило імпорт в самому верху таблиці стилів, щоб включити таблицю з змінними.
@import “path to/lib.less”;
Давайте повернемося безпосередньо до застосування змінних. Давайте задамо стилі для базових елементів a body і, використовуючи змінні.
body {
background: @white;
color: @black;
}
a {
color: @blue;
}
a:hover {
color: @red;
}
Я тільки що призначив для сторінки білий фон і чорний текст, посилання будуть синіми, а при наведенні – червоними. Це досить буденне використання стилів, яке саме по собі легко піддається зміні. Ви можете запитати себе: навіщо мені потрібно для цього використовувати змінні? Давайте уявимо, що у вас є таблиця стилів, що складається з 2, 000 рядків коду, і ви вказали червоний колір у форматі hex значення 50 разів. Давайте також уявімо, що ви захотіли вибрати більш темний відтінок червоного. У звичайній CSS таблиці вам би довелося переглянути весь код і змінити всі 50 значень. В LESS, все, що вам потрібно зробити, – це змінити значення кольору у змінної, і колір автоматично зміниться в тих місцях, де була використана мінлива. Якщо ви запитаєте мене, то я відповім вам, що це приголомшливо економить ваш час. Управління кольорами за допомогою змінних можна вважати базовою технікою. Давайте розглянемо що-небудь складніше.
Управління властивостями margin і padding через змінні
Давайте використовувати змінні для управління значеннями поля (margins) і відступів (paddings). Є кілька причин на користь цієї ідеї. Перша (така ж, як для квітів): якщо ми вирішимо змінити значення, нам потрібно буде зробити тільки в одному місці. Друга: набагато легше досягти узгодженості значень у всій таблиці стилів з використанням змінних. Скільки разів ви завершували написання дійсно довгою таблиці стилів, переглядали її і бачили, що значення для полів і відступів задані врозкид? Якщо ви дбаєте про вертикальному вирівнювання елементів на сторінці, то використання змінних може вам дуже стати в нагоді. Давайте спочатку оголосимо наші змінні.
@margin: 10px;
@padding: 10px;
Я буду використовувати просте значення, наприклад, 10px, з яким легко можна зробити множення, ділення, вирахування або складання. Про це трохи пізніше, а зараз давайте призначимо дані змінні для нашого селектора body.
body {
background: @white;
color: @black;
margin: @margin;
padding: @padding;
}
Я тільки що додав 10px для полів і відступів у елемента body нашої сторінки. Однак, зараз я думаю, що краще зробити відступ у 20px. Слід мені повернутися назад і змінити значення змінної? Ні, давайте використаємо оператор LESS, щоб змінити значення «на льоту». В якості операторів використовуються символи додавання, віднімання, множення або ділення для обчислень з базовим значенням змінної.
body {
background: @white;
color: @black;
margin: @margin;
padding: (@padding + 10);
}
Просто візьміть значення в дужки і використовуйте просте математичне вираження для того щоб додати додаткові десять пікселів. Тут ви також можете використовувати множення:
padding: (@padding * 2);
Я, звичайно, рекомендую вам використовувати дану запис, тому що так легше відстежити результат подібних операцій, на відміну від операцій додавання або віднімання значень пікселів. Ви не обмежені у використанні тільки цілих чисел, ви можете використовувати також дробові значення:
padding: (@padding * 1.5);
Кордону
Ще одне гарне місце, де можна застосовувати змінні, – це властивість border. Ви можете об’єднати і використовувати відразу декілька значень змінних, точно також як ви використовуєте разом CSS значення. Спочатку встановимо кілька змінних кордонів.
@border-size: 1px;
@border-type: solid;
@border-color: @black;
Зверніть увагу на те, що я використовував змінну значення іншої змінної. Це абсолютно нормально, і так навіть рекомендується робити. Роблячи так, ви створюєте як би модульну структуру вашої таблиці стилів, яку легше буде змінювати в подальшому. Якщо ви зміните значення змінної @black, то нове значення буде успадковано усіма вашими CSS властивостями та елементами. Тепер застосуємо ці змінні до селектору.
.box {
border: @border-size @border-type @border-color;
}
Такий спосіб визначення меж набагато краще, тому що вам не потрібно турбуватися про неузгодженість значень вашої таблиці стилів. Думаю, на сьогодні досить. Дана стаття вже є цілком пристойним введенням в технологію LESS, і вона показує значущість використання препроцесора. Так, вам потрібно вивчити трохи нового синтаксису і переосмислити те, як ви будуєте ваші таблиці стилів, але це дозволить вам зберегти надалі масу часу і полегшить подальшу підтримку.
Якщо ви зацікавлені в тому, щоб дізнатися більше про створення тим для фреймворку Bootstrap з допомогою LESS, тоді вам знадобиться моя електронна книга Освоєння фреймворку Bootstrap. Я присвятив цілу главу використання LESS при створенні тем для Bootstrap.
