Робота з LESS в PhpStorm, Aleksei Penzentcev
У цьому пості я коротко розповім про плагін“LESS CSS compiler” дляPhpStorm, який я використовую для роботи з LESS у цій прекрасній IDE від JetBrains. Навіщо він потрібний, у чому плюси, який я знайшов недолік і як з ним можна впоратися, розказано нижче.
Як уже писав в одному з попередніх постів, основою для дизайну свого блогу я вибрав безкоштовну версію CSS-фреймворку PixelKit. Фреймворк поставляється у двох варіантах: як набір CSS-стилів та у вигляді *.less файлів. Почав я, природно, із CSS. І дуже скоро задумався про оптимізацію — аж надто пухкий style.css у мене виходив. Тут я згадав про LESS-версію фреймворку ... Вона була завантажена, переміщена куди потрібно, і постало питання "а чим все це компілювати?".
Потрібно було рішення, яке могло б компілювати *.less файли на льоту відразу після їх зміни. Недовго думаючи, я пробігся репозиторією плагінів для PhpStorm. На щастя, там виявилося кілька плагінів, які обіцяли саме те, що мені потрібне. Я вирішив спробувати один з них. Це був "LESS CSS compiler ".
Після встановлення плагін додає своє меню налаштувань до стандартних налаштувань середовища. Пункт називається "LESS Profiles ". Як видно з назви, тут налаштовуються профайли для компіляції LESS.
Попередні налаштування плагіна LESS CSS compiler
Існують два корисні налаштування, що дозволяють бути більш гнучким у розташуванні *.less-файлів. Плагіну можна вказати, які ще файли потрібно включити в проект (вказавши через кому шлях до них). Але, що важливіше, існує налаштування, яке говорить, які файли не потрібно компілювати. Навіщо вона потрібна? Справа в тому, що, як правило, стилі компілюються з декількох *.less-файлів в один підсумковий. Якщо не виключити всі файли, крімвеликого, то після кількох правок біля кожного *.less-файла з'явиться скомпільований для нього *.css-файл з таким же ім'ям. А от якщо всі основні *.less-файли, крім заголовного, акуратно лежать в окремій папці, її можна додати у винятки і тоді при компіляції на виході вийде лише один вихідний файл.
Загалом плагін досить зручний, має прості та зрозумілі налаштування, компілює досить швидко… Але він має один неприємний недолік: він не розуміє шляхи до папок, що містять прогалини. Цю недоробку можна легко обійти, створивши символічне посилання на потрібну директорію з таким самим ім'ям, але без прогалин, і згодувати її плагіну. Для нього все буде виглядати нормально, при цьому працювати він буде з файлами, де вам потрібно.
Насамперед потрібнододати новий профайл і задати йому ім'я.
Далі,вказати шлях до папки, де знаходяться *.less файли. Плагін буде переглядати зокрема піддиректорії.
У графі “CSS Output Directory” потрібновказати, дебуде скомпільований CSS файл.
Також можна відзначити галочки навпроти "Компілювати автоматично при збереженні" та "Стиснути вихідний CSS файл". Так, плагін усе це вміє.
Існують дві корисні налаштування, що дозволяють бути більш гнучким у розташуванні *.less файлів. Плагіну можна вказати, які ще файли потрібно включити в проект (задавши через кому шлях до них). Але, що важливіше, існує налаштування, яке говорить, які файли не потрібно компілювати. Навіщо вона потрібна? Справа в тому, що, як правило, стилі компілюються з декількох файлів *.less в один підсумковий. Якщо не виключити всі файли, крім великого, то після кількох правок біля кожного *.less файлу з'явиться скомпільований для нього *.css файл зтаким самим ім'ям. А от якщо всі основні *.less файли, крім заголовного, акуратно лежать в окремій папці, її можна додати у винятки і тоді при компіляції на виході вийде лише один вихідний файл.
Загалом плагін досить зручний, має прості та зрозумілі налаштування, компілює досить швидко… Але він має один неприємний недолік:LESS CSS compilerне розуміє шляхи до папок, що містять пробіли.
Цю недоробку можна легко обійти, створивши символічне посилання на потрібну директорію з таким самим ім'ям, але без прогалин, і згодувати її плагіну. Для нього все буде виглядати нормально, при цьому працювати він буде з файлами, де вам потрібно.