Key Takeaways
- Magento 2 supports LESS, a CSS preprocessor that improves productivity with variables, mixins, and nested rules.
- LESS files in Magento 2 automatically compile into CSS, simplifying front-end styling workflows.
- You can integrate custom LESS files in Magento 2 modules to customize store designs efficiently.
- Magento 2 prioritizes .css files but falls back to .less files, compiling them automatically into CSS during deployment.
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.
Start Using LESS in Magento 2 Now!
Transform your Magento 2 store styling with LESS in just a few steps. Implement custom styles today and see instant results on your frontend.
But, you might be wondering how the LESS file worked, right? The answer is when you defined custom.cssin 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 thecustom.cssfile.
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.
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]
