Що таке less і як його використовувати, саша Бізіков

Для спрощення життя верстальника придумано достатню кількість фреймворків і надбудов. Зараз піде мова про спрощення і прискорення написання стилів для сайтів. Для цього як відомо використовуються каскадні таблиці стилів CSS.

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

Для того, що б почати писати стилі на LESS, достатньо знань CSS, нічого нового вивчати не потрібно. Тому поріг входження в дану мову дуже малий.

Як перейти на LESS?

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

Після того, як стилі сконвертовані в LESS, створюємо відповідний файл з розширенням .less, наприклад style.less.

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

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

Якщо ви використовуєте середу розробки IDEA, то раджу використовувати плагін. При втраті фокуса програми less компілюватиметься в css, це дуже зручно 🙂

Коли є розуміння того, як працювати з LESS, можна переходити до основних можливостей мови, заради якого варто його використовувати:

змінні

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

Схожі статті