Отладка less

mbaev 27.09.2016, 09:03

Если идти в ногу со временем или даже если отставать на шаг, то пора использовать препроцессоры для компиляции css. Существует достаточное количество материала на тему плюсов и минусов тех или иных препроцессоров, а так же сторонников и противников этой техники написания стилей.

Обычно отладчик в браузере (в моём случае Mozilla Firefox) выглядит так:
debug-styles-css

Задача данной статьи помочь тем, кто все же решился использовать less для компиляции стилей и подсказать как же можно отлаживать стили и сразу, в отладчике браузера, видеть в каком less-файле написан стиль.
debug-styles-less

Итак, у нас есть проект и есть, скажем, такое дерево:

  1. theme
  2.   |- css
  3.   |  |- style.css
  4.   |-- less
  5.   |  |- style.less

Для того, чтобы была возможность дебаггинга нужно всего-навсего создать файл-карту - index.css.map и положить её рядом со стилями (css), чтобы в конечном итоге дерево выглядело так:

  1. theme
  2.   |- css
  3.   |  |- style.css
  4.   |  |- index.css.map <- наша карта
  5.   |- less
  6.   |  |- style.less

Конечено же, файл-карту или, проще говоря, маппинг, создавать руками не нужно. Препроцессоры уже позаботились о нас и предоставляют такую функциональность.

Например, в less достаточно добавить пару ключей при компиляции:

  1. lessc less/style.less > css/style.css --source-map=css/index.css.map --source-map-basepath=css

Отладка Less в PhpStorm

Ну и как всегда куда же без нашей любимой IDE.
Если вы имеете настроенный компилятор в PhpStorm, то вам достаточно добавить последние два ключа в аргумены. У меня строка Arguments в окне Settings->Tools->File Watchers->{watcher}->Edit Watcher выглядит так:

  1. --no-color $FileName$ --source-map=../css/index.css.map --source-map-basepath=../css

phpstorm-less-watcher

Ссылки