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.

📣 Try the fastest hosting platform with pay-as-you-go pricing & 24/7 expert support! MIGRATE NOW →

Guide About How to Use LESS in Magento 2

Updated on December 23, 2021

2 Min Read
less magento 2

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.

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:

@radius: 20px;

#somediv {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

This code will be compiled in CSS as:

#somediv {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

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:

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

   <head>

       <css src="Cloudways_Customless::custom.css"/>

   </head>

</page>

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:

@color: #FF5733;
div
{
    background-color: @color;
}

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

rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* var/session/* var/view_preprocessed/* pub/static/*
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento cache:clean
php bin/magento cache:flush
php bin/magento indexer:reindex

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

Share This Article

Abdur Rahman

Abdur Rahman is the Magento whizz at Cloudways. He is growth ambitious, and aims to learn & share information about Ecommerce & Magento Development through practice and experimentation. He loves to travel and explore new ideas whenever he finds time. Get in touch with him at [email protected]

×

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

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour

CYBER WEEK SAVINGS

  • 0

    Days

  • 0

    Hours

  • 0

    Mints

  • 0

    Sec

GET OFFER

For 4 Months &
40 Free Migrations

For 4 Months &
40 Free Migrations

Upgrade Now