Вивчаємо LESS в CSS: Введення

414

Від автора: я дуже радий почати сьогодні серію статей, присвячених LESS, динамічному мови, який значно розширює можливості CSS і додає в нього багато властивостей. LESS дозволяє вам використовувати змінні, міксини, вкладені правила і навіть функції всередині CSS. Він надзвичайно ефективний і може значно прискорити процес розробки. Звичайно, щоб освоїти цю тему, вам буде потрібно докласти зусилля, але як тільки ви розберетеся в LESS CSS, ви точно ніколи більше не захочете працювати без нього.

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

Введення

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

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

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

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

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

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

Як бачите, попереду вас чекає багато чого цікавого. Давайте ж почнемо.

Що таке LESS і навіщо він потрібен?

За той час, що я займаюся розробкою, я виявив, що, коли мова заходить про LESS (чи будь-якому іншому препроцессоре CSS), люди діляться на три типи. Є люди, типу Я ніколи про нього не чув, інший тип –Так, я пробував, але це не моє, і третій тип – О, так! Я його обожнюю!

Мета цієї серії – зробити так, щоб ви опинилися в третій категорії.

Згідно Вікіпедії, LESS: це динамічний мова стилів, який розробив Алексіс Селлье (Alexis Sellier). Він був створений на основі мови стилів Sass і, в свою чергу, вплинув на його новий синтаксис “SCSS”, в якому також використаний синтаксис, який є розширенням CSS.

LESS був представлений в 2009 і в останні місяці отримав широке застосування у великих і малих проектах, включаючи фреймворк Bootstrap від компанії Twitter, найпопулярніший проект на веб-сервісі GitHub.

В ході ознайомлення зі статтями цієї серії ви зможете краще вловити суть того, що ж таке насправді LESS і як його можна використовувати, і незабаром ви будете в змозі створити вражаючу бібліотеку змінних, швидких ефектів CSS3 і багато іншого.

Які матеріали є по цій темі?

Існує безліч джерел, в яких ви можете прочитати про LESS, першим з них може бути http://lesscss.org домашня сторінка LESS. Цей ресурс допоможе вам у встановленні, роботі з кодом, обробці файлів LESS та у багатьох інших питаннях.

Веб-сайт Smashing Magazine теж опублікував введення в LESS та його порівняння з SASS, тобто з іншим популярним препроцесором CSS.

Також завдяки простому пошуку в Google за запитом «LESS» ви можете знайти багато різних ресурсів, порад і рекомендацій, але ніщо не допоможе вам краще освоїти LESS, ніж якщо ви самі на практиці візьметеся за роботу з кодом і вивчіть все з самого початку.

LESS працює на стороні сервера або клієнта?

Хороше запитання, відповідь на нього такий: і на тій, і на іншій. Або ж ні на одній з них. Щоб застосувати LESS на стороні клієнта, потрібно зберігати всі ваші файли type.less і включати їх в документ точно так само, як ви робили це з файлом CSS.

Після того, як ви завантажили всі файли LESS, потрібно звернеться до файлу LESS JS, який компілює всі ваші файли в одну таблицю стилів CSS.

І це на стороні клієнта! Не забувайте, що потрібно звертатися до файлу the less.js після того, як ви додасте таблицю стилів .less.

Я не буду вдаватися в подробиці того, як встановити LESS на стороні сервері просто тому, що я не дуже багато працюю на стороні сервера і не хотів би вводити вас в оману. Замість цього, я докладно розгляну третій метод, який я дуже рекомендую. Працювати ні на тій, ні іншій стороні.

Використання LESS.APP для MAC OS X

Одним з найбільш авторитетних клієнтів, використовуваних мною при написанні коду в LESS, є додаток LESS.app для Mac OS X (Вибачте мене, користувачі Microsoft – просто спробуйте SimpLESS). З допомогою LESS.app відбувається компіляція файлів LESS в таблицю стилів CSS і навіть з’являється можливість виконати мінімізацію CSS, щоб зменшити розмір файлу. Це робить створення стилів неймовірно ефективним, тому що ви можете використовувати десятки файлів LESS, компілювати їх в одну таблицю стилів, виконувати мінімізацію і публікувати їх на сервері.

Для того, щоб використовувати LESS.app, просто перетягніть папку з робочим кодом у вікно програми і LESS.app автоматично знайде ваші файли LESS. Потім можна уточнити, які саме файли ви хочете конвертувати в CSS, куди їх потрібно зберегти (в робочій папці) і чи потрібно виконувати мінімізацію CSS. Крута річ, безумовно.

Отже, приділіть кілька хвилин сьогодні і в майбутньому того, щоб розібратися в LESS і LESS.app, і вивчити деякі матеріали по цій темі. Наступна стаття серії буде присвячена Застосуванню змінних. До скорого.