Вступ до LESS

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

Дебати щодо LESS і SASS ніколи не закінчаться, але колись приходить час, коли ми повинні зробити вибір. Вибір розробників падав на LESS через те, що його підтримував Bootstrap, а ще його було дещо простіше почати використовувати.

Використання less.js

less.js \- це простий скрипт, який потрібно додати до head; вашого документу і він буде автоматично компілювати LESS у CSS. Це дуже корисно та зручно в період розробки, але не повинно використовуватися у готовому продукті.

Спершу, йдемо на оф. сайт lesscss.org та завантажуємо less.js. Коли ми отримали архів, розпаковуємо його і переносимо js файл у директорію з js вашого проекту. Тепер відкриваємо HTML документ та додаємо це:

    <script src="path-to/less.js" type="text/javascript"></script>

Тепер ваша сторінка готова до компіляції LESS файлів. Наступне, що потрібно зробити - додати лінк LESS файлу до документа. Важливо: Лінк потрібно додати перед less.js. Додавання посилання відбувається як і при додаванні звичайного CSS, крім того, що обов'язково потрібно вказати rel="stylesheet/less" для лінк-тегу.

    <link href="path-to/styles.less" rel="stylesheet/less">

Все, ви додали less.js і вказали лінк на LESS, шаблон готовий до роботи з препроцесором. Прийшов час розібрати базові функції та можливості цього інструмента.

Змінні

Змінні - це сама проста і при цьому дуже корисна функція, яку надає нам LESS. Щоб вказати змінну треба почати введення з символу @ та додати ключове слово. Для прикладу створимо змінні - назви кольорів:

    @blue
    @red
    @black
    @white

Назва - лише перший крок, наступне, що потрібно зробити - вказати значення для змінної:

    @blue: #00f;
    @red: #c00;
    @black: #000;
    @white: #fff;

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

    @import "path-to/lib.less";

Давайте розглянемо конкретний приклад використання, вкажемо стилі для body та a:

    body {
      background: @white;
      color: @black;
    }
    
    a {
      color: @blue;
    }
    
    a:hover {
      color: @red;
    }

Ми встановили білий background та чорний колір тексту, лінки будуть синього кольору і будуть мінятися на червоний при наведенні. Все дуже просто. Виникає питання: Невже не простіше просто використати конкретне значення, а не змінну? Для простих документів - так, але що, якщо в нашому файлі червоний колір використовується 50 разів? При виникненні потреби щось змінити, буде потрібно 50 разів змінити значення. Використовуючи LESS - 1 раз.

Контроль кольорів - це базова техніка. Давайте розглянемо щось більш складне.

Контроль Margin & Padding з допомогою змінних

Можна використовувати змінні для контролю значень margin (відступ від кожного краю елемента) і padding (поля навколо вмісту елемента). Це гарна ідея. По- перше, як вже було сказано, при змінні значень, нам потрібно зробити всього- на-всього одну поправку. По-друге, набагато простіше домогтися стабільного значення для всієї таблиці стилів, якщо використовувати змінні. Кожен знає відчуття, коли створений файл стилів настільки довгий, що прокручування у пошуку певних значень починає займати багато часу. У цьому випадку змінні куди більш зручний варіант. Якщо ви знайомі з таким поняттям як вертикальний ритм - змінні можуть допомогти. Створюємо змінні:

    @margin: 10px;
    @padding: 10px;

Тепер давайте використаймо ці значення для нашого body:

    body {
      background: @white;
      color: @black;
      margin: @margin;
      padding: @padding;
    }

Ми вказали значення 10px для margin і padding. Що, якщо ми хочемо змінити 10 на 20? Чи потрібно змінювати значення змінної? Ні, LESS підтримує калькуляцію, тож ми можемо додавати, віднімати, множити і ділити.

    body {
      background: @white;
      color: @black;
      margin: @margin;
      padding: (@padding + 10);
    }

Просто заключіть значення у дужки і виконуйте прості арифметичні операції. Також можна використовувати мультиплікацію:

    padding: (@padding * 2);

Це більш правильний спосіб, тому що так легше відслідковувати операції. Ви не обмежені лише цілими числами:

    padding: (@padding * 1.5);

Границі

Ще одне гарне місце, щоб використати змінні. Ви можете зв'язати разом кілька значень змінних, як це робиться зі значеннями CSS. Створимо декілька змінних для значень border:

    @border-size: 1px;
    @border-type: solid;
    @border-color: @black;

Ми використовуємо змінну як значення для іншої змінної. Це добре і так рекомендовано робити. Це робить вашу таблицю стилів більш модульованою і спрощує її кастомізацію.

Якщо ми змінимо значення @black, змінна відбудеться для всіх елементів і компонентів, так зване наслідування. Використаймо ці змінні для селектора:

    .box {
      border: @border-size @border-type @border-color;
    }

Це більш зручний спосіб, так як вам не потрібно буде турбуватись про неузгодженність значень у таблиці стилів.

Це все на сьогодні. Сподіваюсь, що вищевикладене \- повноцінний вступ до використання препроцесора LESS. Використання цього інструменту збереже ваш час та допоможе спростити процес розробки.