Guide About How to Use LESS in Magento 2

by Fayyaz Khattak  February 20, 2017

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.

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About 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

Stay Connected:

You Might Also Like...