CSS Preprocessors: Use of LESS in Magento

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 and SASS are both effective CSS augmentations. To a greater extent, you can consider them a programming language
intended to make CSS more viable, themeable, and extendable. Both LESS and SASS are in reverse compatible so you
can, without much of a stretch, change over your current CSS records just by renaming the .css document augmentation
to .less or .scss, respectively. LESS is JavaScript based and Sass is Ruby based.

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

Client-side LESS compilation

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:

The LESS Php library checks for the CSS file in the directory. If it is present, then the execution is stopped, otherwise,
it continues further.

If the CSS file is not found, then the library looks for the same file name but with .less extension.

If .less files are not found then execution is stopped else the library reads the .less files and looks for the @import
directives.

After that, the library resolves all ways of LESS documents utilizing Magento fallback component and put LESS files
under /var/view_preprocessed/less.

All source .less documents are parsed to PHP LESS compiler and after that it creates relative CSS records to pub/static/frontend/<Vendor>/<theme>/<locale>.

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.

The processing of client-side compilation is the same in both development and production mode. In Client-side LESS compilation
mode, the compilation is performed over client (browser) using lib/web/less/config.less.js and lib/web/less/less.min.js
files. The process is not so different in client-side less compilation over server-side less compilation. In client
side, the pub/static is published at last after the page is loaded. In client-side compilation also, the files are
published in the same directory as the server-side compilation. In this mode, the compilation is done by javascript
files. So whenever any change is made in the .less file, the effects can be seen immediately after reloading the
page in web browser. The CSS file is created dynamically as you load the page. Also, there is no need to clear the
directory every time you make some change in the less code unless you change any root source files that contain @import
directives, and if you rename, remove or add new .less files in the project. Another technique is to use file watchers
such as grunt that converts the less code into CSS stylesheet while you are editing the .less file.

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.