The front end is an integral part of a website as it is the first thing that a user notices about a website. Normally a website can be provided with styles by properly using CSS known as Cascading Style Sheets. CSS Frontend in an E-Commerce website is all about dynamic designing. The concept of dynamic design comes from the extensive requirement of customization in the user interface of the website and with these customizations comes the need for pre-processing the styles of the webpage. CSS alone is not enough for fulfilling those requirements; hence, a little advancement to CSS is required. To fulfill those advancements, LESS is used.
LESS is a CSS pre-processor that extends the capabilities and features of Cascading Style Sheets. A CSS pre-processor is essentially a scripting dialect that broadens the CSS and after that accumulates it into normal CSS. In a way, LESS works like a styling script allowing features like importing LESS files, mixins, variables, functions. We can declare variables and functions in less and reuse those variables and functions anywhere on the page. Therefore increasing code reusability and allowing us to implement the required styles using very less codes. It also allows developers to create scalable, modular and manageable CSS styles.
Less vs Sass
LESS in Magento
Web browsers by default do not support .less files. Therefore less compilers are needed to convert less files to CSS files. In the case of Magento, it will look for the CSS files that you mentioned in your code, if CSS files are not found, it will look for the .less files with the same name. So how does that happen in Magento?
Well, there are two ways to compile .less files to CSS style sheet. They are:
Server-side LESS compilation
The default less compilation mode in Magento is the server side compilation. The setting can be found in the admin panel in Store -> Configuration -> Advanced -> Developer -> Frontend Development Workflow. This way of compilation can be used on both developer and production mode yet with some constraint. In Server-side LESS assemblage mode, the processing is performed over server utilizing LESS PHP library.
Following is the explanation of how server-side compilation of less files take place:
That was all about the main tasks performed by the server side less compiler to convert .less files to .css files. But what happens when the .less files are modified under development or production mode? The changes are not affected in the browser until you clear the directories "pub/static/frontend/<Vendor>/<theme>/<locale>/" and "var/view_preprocessed/less/" and then load the page so that the PHP less compiler will convert the .less files to .css files again. In development mode, you can see the change directly but in the production mode, you have to deploy static contents using the command "bin/magento setup:static-content:deploy"
Client-side LESS compilation
To use client-side LESS compilation, you have to change the configuration in the admin panel in Store -> Configuration -> Advanced -> Developer -> Frontend Development Workflow and select Client-Side LESS compilation mode and then save the settings by clicking on Save Config button and clear cache.
So why should you add another layer of complexity to the development workflow?" As you know what you are doing with CSS, if it's not broken, don't fix it right? But to remove the development barriers from CSS, you should use CSS pre-processors such as LESS. It also adds some characteristics that should have been in CSS from the start such as modularity. It makes your CSS Dry that is "Don't Repeat Yourself" instead of Wet that is "Write Everything Twice". It will also make code management a lot easier and hence will save your time. Most importantly, you have to write less codes. That is the main reason it is called LESS.