This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

CloudwaysCDN — a powerful solution that offers superior performance and satisfied global audience for your business. Read More

Guide About How to Use LESS in Magento 2

Updated on  20th February

3 Min Read
Reading Time: 3 minutes

Magento 2 supports a CSS preprocessor known as LESS. It extends the capabilities and features of CSS which allows using variables, functions, mixins, nested rules, and operations when writing styles. When you use LESS in Magento 2, you ultimately increase the productivity in the development of front-end styles. LESS also supports Lazy Loading feature; you may define your variables anywhere and can use it anytime and anywhere you want.

LESS in Magento 2

When LESS runs, it automatically generates CSS, which is an awesome way to be everything a programmer ever wanted. Here is a small example to understand how a LESS converts into CSS. Let’s take a LESS file with the following code:

This code will be compiled in CSS as:

In the example above, we created a LESS file with a variable @radius and assigned a value of 20px to it. Now, wherever we will invoke @radius variable in LESS file, it will assign a value of 20px in the generated CSS file.

Writing about all the functionalities of LESS would probably fill up a book. Instead of that, we are going to talk about how to use LESS in a Magento 2 store. If you plan on learning LESS, finding multiple ways to work with different CSS tools, or just leave the front end styling to the UI Engineers, understanding the use of LESS in Magento 2 is an important skill whether you are a junior Magento 2 Developer or a Magento Master.

So, let’s start with creating a basic Magento 2 module with the necessary module.xml and registration.php files.

Next, create a new file default.xml in app/code/Module_Namespace/Module_Name/view/frontend/layout and add the following code to it:

In the code above, you can see we have defined a custom.css file in our module but we are not going to put the custom.css file, we are going to use custom.less file in our module. In app/code/Module_Namespace/Module_Name/view/frontend/web/, create a new file custom.less and add the following code to it:

Now, using an SSH terminal like Putty, run the following Magento 2 CLI commands:

Congratulations! You have successfully created and used LESS in a Magento 2 store instead of CSS. Just load your Magento 2 frontend and see the changes. You can make other changes as well according to your wish.

But, you might be wondering how the LESS file worked, right? The answer is when you defined custom.css in your module, Magento 2 first tries to find the custom.css, but it’s unsuccessful. Magento 2 then searches for the custom.less file which is found and then transformed into the custom.css file.

I hope you now understand how you can use LESS in Magento 2. That’s all in today’s article. Try it, and if you have any questions, just comment below and I’ll get back to you.

Share your opinion in the comment section. COMMENT NOW

Fayyaz Khattak

Fayyaz is a Magento Community Manager at Cloudways - A Managed Magento Hosting Platform. His objective is to learn & share about PHP & Magento Development in Community. Fayyaz is a food lover and enjoys driving. You can email him at m.fayyaz@cloudways.com

Start Growing with Cloudways Today.

Our Clients Love us because we never compromise on these

Get Our Newsletter
Be the first to get the latest updates and tutorials.

THERE’S MORE TO READ.