Отладка less

Опубликовал Максим Баев, 27 сентября 2016, 10:03

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

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

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

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

theme
  |- css
  |  |- style.css
  |-- less
  |  |- style.less

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

theme
  |- css
  |  |- style.css
  |  |- index.css.map <- наша карта
  |- less
  |  |- style.less

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

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

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 выглядит так:

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

phpstorm-less-watcher

Ссылки

Другие посты