Christmas is coming up and its high time to design your webpages to include christmas, new year effects, etc in your website. You will have to make those changes by modifying the style of the page and that is what Less is useful. So today we are going to look into how to use Less in our custom module there by you can create custom design changes by this way. What are you waiting for? Just go ahead and get your site ready for festival season.
Magento 2 is one of the most preferred ecommerce applications in the world and so are we going to look at how to pu Less to use in Magento 2 via a custom module.
What is Less?
Less is nothing but a dynamic preprocessing style sheet language which can generate the CSS file readable by the browsers. It is that Less extends the features of CSS by adding dynamic behaviours by including variables, mixins, operations and functions. It basically helps you to create scalable and more manageable style sheets. You woundnt have to repeat the same styles again and again and thereby you can save a lot of coding time.
Lets just have a sneak at a sample CSS code and see how it gets converted into CSS.
Less Code:
@themeColor: #EEEEEE;
#p{
color: @themeColor;
}
#testimonials-section{
background-color: @themeColor;
}
The above Less code when executed by the preprocessor, will geneate the following CSS output:
#p{
color: #EEEEEE;
}
#testimonials-section{
background-color: #EEEEEE;
}
This should give you a gist on what Less is and we can look into the step on how to use it in Magento 2. For this, we would be needing to create a new Magento 2 module what would include our less file into each pages of Magento.
Velanapps would be the NameSpace for our module and the module name would be Lesscode
Create the Velanapps and Lesscode folders such that the folder structure looks like the following:
/app/code/Velanapps/Lesscode/
registration.php:
Create registration.php file in the directory /app/code/Velanapps/Lesscode/ and add the follwing code:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Velanapps_Lesscode',
__DIR__
);
module.xml:
Create module.xml file in the directory /app/code/Velanapps/Lesscode/etc/ and save the following code in the file:
<?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="Velanapps_Lesscode" setup_version="1.0.0"></module>
</config>
default.xml:
Create default.xml file in the directory /app/code/Velanapps/Lesscode/view/frontend/layout/ and save the following code in the file:
<?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="Velanapps_Lesscode::themechanges.css"/>
</head>
</page>
themechanges.css:
Create themechanges.css file in the directory /app/code/Velanapps/Lesscode/view/frontend/web/ and save the following code in the file:
@themeColor: #F35858;
@fontColor: #000000;
div{
background-color: @themeColor;
}
p{
color: @fontColor;
}
CLI Commands:
Execute the below commands in the following sequence:
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
Verify if our module is enabled by executing the following command:
php bin/magento module:status Velanapps_Lesscode
Now open up the Magento Homepage and you should be able to see the background and font color changes.