Categories: Magento 2 Tutorials

How to Use Less in Magento 2

The holiday season is the most important period for every ecommerce store as they have better chances to get more sales. Your store has to be optimized and customized according to the various holiday themes such as Halloween, Thanksgiving, and Christmas. LESS can be highly useful in customizing and styling your store. Magento 2 is the most popular and the preferred platform for running an ecommerce store. So, I am going to teach you how to use LESS in Magento 2. Hold on! Do you know about LESS? First, let’s talk about LESS and then I will move on to how you can implement it.

What is LESS?

You should already be aware of CSS and how it is used in designing and styling your website, but it has some limitations. For example, you have to repeat the same styling if you want to use the same looks in different places. LESS helps eliminate this limitation. LESS is basically a CSS preprocessor which is used in creating scalable and manageable style sheets. It saves a lot of time as you do not need to repeat the same style. Let’s discuss the example and process of LESS: Here’s the LESS code:

@newcolor: #fff8e3;
#a
{
background-color: @democolor;
}
#b
{
color: @democolor
}

Now when it executes, it will convert into CSS:

#a
{
background-color: #fff8e3;
}
#b
{
color: #fff8e3;
}

I hope you now have some understanding of LESS. So now it’s time to implement LESS in Magento 2 and for that, I will use a custom module since editing core files is discouraged. If you are not familiar about custom module, then you can refer to this guide: How to Create a Module in Magento 2. Note: I am using Magenticians as Namespace and Myless as Module name.

Create module.xml

Create module.xml in app/code/Magenticians/Myless/etc and add this code:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Magenticians_Myless" setup_version="1.0.0"></module>
</config>

Create registration.php

Create registration.php in app/code/Magenticians/Myless and add this code:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Magenticians_Myless',
__DIR__
);

Create default.xml

Create default.xml in app/code/Magenticians/Myless/view/frontend/layout and add this code:

<?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="Magenticians_Myless::customcolor.css"/>
</head>
</page>

You can see in the above code that I have added the file path as css but I will create this file with less path.

Create customcolor.css

Create customcolor.less in app/code/Magenticians/Myless/view/frontend/web and add this code:

@newcolor: #f26322;
div
{
background-color: @newcolor;
}

Run Commands

Check the status of your module by running this command: php bin/magento module:status If your custom module is disabled then run this: php bin/magento module:enable Magenticians/Myless Now just run all the following commands one by one: 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 Now check the output by going to your store:

Wrapping Up

Make sure your Magento 2 store is prepared for the holiday season and you can use LESS for its preparation. I have shown you just a simple example of how you can use LESS in Magento 2 and how you can utilize it according to your needs. So now I believe that you can add LESS in your Magento 2 store. If you want to discuss anything related to this tutorial, leave a comment below!

Syed Muneeb Ul Hasan

Syed Muneeb Ul Hasan is an expert in PHP and Magento, he prefers to educate users in implementing and learning Magento. When not working, he loves to watch cricket.