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
Read our latest article about x-magento-init: https://www.codilar.com/x-magento-init/
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.
Shantanu
Codilar Technologies
