Overview
1. How does it work ?
With Magento 1, you could just include your CSS files through XML, for example like this, in page.xml file.
And you could use ( or not ) whatever you want to generate that file. Madison Island theme, that first came out with Magento 1.9, is using Sass preprocessor for compiling CSS.
– In Magento 2, you still add your CSS files through XML, It looks a bit different
2. Request Flow
3. Less compilation modes
– Server-side Less compilation:
This is the default compilation mode, and is the only option in production application mode. In this case the compilation is performed on the server, using the Less PHP library.
– Client-side Less compilation:
When your application is not in the production mode, you can set Magento to compile .less files in a browser, using the native less.js library.
4. How to Config LESS Compilation Modes?
– From the Magento Admin go to Stores > Configuration > ADVANCED > Developer
– Next, select Default Config from the Store View drop-down list
– In the Workflow type select the compilation mode (right under Frontend
developmentworkflow)
– Save the changes by clicking on the Save Config button
– Make sure that the compilation mode is the same for both website scope and StoreView.
5. How to Styles debugging in client-side and Server-side
https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css-preprocess.html
6. Compile LESS using Grunt
– Grunt configuration
– Grunt commands
– CSS source maps
https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css_debug.html
You can read more here.
