From my experience, LESS is extremly painful compared to CSS. Especially the workflow is much much slower. Most of it's advantages like nesting, are getting destroyed by the much bigger disadvantages.
Almost no documentation about using LESS, Grunt and Livereload with Magento 2. (I needed about 4-5 days of research and trial and error to figure it out)
Edit in browser developer tools is not possible if your project is on a remote server, you will have to make your changes in your IDE, because the browser <-> IDE Synch does not work well, even if you added Workspaces .
No immediate live edit in browser possible. You will have to wait until "grunt watch" detects the changes and recompiles the files and livereload plays them back. You have to wait about 8-10 seconds, even on a fast server.
It is hard to tell in which file you have to make changes, even with sourcemapping activated. It can still lead you to the wrong code. You always have to use linux find and grep to localize the code parts, which can take much time.
LESS Code is not very intuitive compared to CSS. There are random variables everywhere and you always have to use linux commands like
grep to find the definition, unless your IDE is able to find them (NetBeans doesnt).
6 . .. and many more
But there are some helpers to minimize the disadvantages.
Without grunt you always have to manually execute alot of magento code in order to remove certain folders, generate less and so on.
Grunt is an automation tool used to automatically perform frequent tasks.
With grunt you can just execute
grunt refresh && grunt watch and it will detect changes in .less files automatically and recompiles.
2. Livereload Extension
First you will have to install it on your server and configure it, then it will automatically get started if you run
You have to add this script to your themes
<script src="http://your-domain.com:35729/livereload.js" src_type="url"></script>
You will also have to install the browser extension, which reloads your site automatically if changes are getting detected.
if you generate .LESS code, then sourcemaps are getting generated. You will have to activate sourcemaps in the developer tools. Then if you inspect an element, it might lead you to the code in the according .less file instead of just showing styles-l.css" or **styles-m.css. But it might also mislead you, unfortunatelly it does not work very well.
From my experience the workflow is much much slower when working with LESS than with CSS. You always have to wait until the code compiles and most of the time you will be busy to figure out where the code you need to modify is located at, even with sourcemaps enabled. Yes it also has some advantages, the code looks more structured on the first look, but this is just a illusion, because variables and classes are distributed in many different files on many different places and it will be alot of work to puzzle it all together in your mind.
Personally I only use LESS to override variable values of the parent luma theme and for changes which are easy to figure out. But if it gets complicated then I just code it in my custom "main.css".