UPDATE from my future self:
The following text contains the view I had as a beginner. If you were able to figure it all out, which can take some days or weeks, then you will love less. It is much better than CSS and has many advantages likes reusable code (mixins) and functions.
But you will need some time to fully understand how to find everything you need. The documentation was bad back then when I wrote this, maybe it is better now.
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".