How to use LESS in Magento 2
Every eCommerce store owner wants to get more sales and leads for their store so that the holiday season is the most important period for them. Do you feel the same? According to the various holiday themes like thanksgiving day, Halloween and Christmas you need to optimized and customized your store. LESS is a highly useful solution for customizing and styling your store. Magento 2 is the most popular and useful platform for running eCommerce store online. So, here in this blog, we are going to explore how to use Magento 2 LESS.
Wait! Do you have any idea about LESS?
LESS is a CSS pre-processor which is used to create extensible and manageable style sheets. According to the official website of LESS stands for Leaner Style Sheets and it is a backward-compatible language extension for CSS. It is a time-consuming method that saves a lot of time as you no need to apply the same style while designing and styling a webpage.
Let’s have a look at below example:
@newcolor: #fff8e3;
#a{ background-color: @democolor;}
#b{color: @democolor}
After execution, it will convert into CSS:
#a{ background-color: #fff8e3;}
#b{ color: #fff8e3;}
So, now you can implement LESS in Magento 2. Let’s take an example of the Magento blank theme. Here, you need to include below CSS file in the head section.
<head>
<css src="css/styles-m.css" />
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print" />
</head>
These CSS source files should be located under :
<Magento_Blank_theme_dir>/web/css/styles-m.css
<Magento_Blank_theme_dir>/web/css/styles-l.css
<Magento_Blank_theme_dir>/web/css/print.css
However, by using the above paths you will not find CSS file with these names. So, now you may think – From where these CSS files load on the browser? You will get below files on the same path with names .less extension instead of .css, hope you are on the right path!
<Magento_Blank_theme_dir>/web/css/styles-m.less
<Magento_Blank_theme_dir>/web/css/styles-l.less
<Magento_Blank_theme_dir>/web/css/print.less
Here, the real magic begins. When Magento did not find the CSS files you mentioned in your handles, it will look for the same files with .less extension. Do you have any idea how .css files get complies into .less files?
There are three modes for Magento 2 LESS Compiler to compile .less files to .css files:
- Client-side Compilation
- Server-side Compilation
- Compilation using automation tools
Follow the below structure:
Go to admin panel > Go to store > Configuration > Developer > and See > Frontend Development Workflow
Server-Side Compilation:
Server-side compilation mode is a default mode set in Magento setting under:
( Stores > Configuration > Advanced > Developer ) Frontend Development workflow.
For both developers and production mode, this can be used, however, there are few limitations. In server-side compilation mode, the compilation is performed over the server using the LESS PHP library. You have to follow the below steps to get learn about how LESS pre-processors works in Server-side LSS compilation mode.
- Step 1: First, LESS pre-processor checks, defined CSS file is present in the relative directory or not. If it’s found then it stops its execution otherwise proceed further.
- Step 2: If the CSS file is not present, the LESS pre-processor finds the file of the same name with .less extension. Here, if LESS files are not found then stops its execution otherwise proceed to next.
- Step 3: Read .less file contents and resolve all @import directives (if any available)
- Step 4: Resolves all paths of LESS files using Magento fallback mechanism and put LESS files under /var/view_preprocessed/less
-
Step 5: All source .less files are parsed to PHP LESS compiler and then it automatically generates relative CSS files to
pub/static/frontend/<Vendor>/<theme>/<locale>/
With the help of the above steps, you can compile LESS in Magento 2.
Client-Side Compilation:
Whenever your Magento 2 instance is not in the production mode, you need to apply client-side compilation to compile .less file with the help of browser using native less.js library. This approach allows you to update CSS/LESS themes instantly as soon as your web page gets reloaded in a browser and unfortunately, this results in exceptionally slow response time even if you are working on the localhost.
Some types of changes require you to clear the static content at the pub/static/frontend/<Vendor>/<theme>/<locale> and with help of this factors generate a new deployment for the changes to have the intended effect.
You can see, as LESS files are compiled every page load on the client-side where the library JavaScript file is too big, so it proves that is inefficient when it comes to performance. So you have to consider this approach for only individual cases.
Magento 2 also provides a Grunt toolkit that you can install, configure and use Grunt JS task runner to compile .less files in Magento 2.
Now, the next thing question is “How you can compile LESS to CSS using CLI?
In this piece, we mainly focus on the server-side LESS compilation mode that users tend to use while customizing Magento 2 theme LESS. This is basically used to update and change CSS files from the themes. It may possible if there is a chance that you want to do a custom change in your theme by editing LESS files, to do this you need to implement some steps in server-side LESS compilation mode.
- Step 1: Create backups first including,
- Your Magento 2 file system (excluding var and pub/static directories)
- The pub/media directory
- Step 2: Open terminal and change to the Magento project root. In the present directory, run the following commands:
- php bin/magento maintenance:enable (To Start maintenance mode)
- php bin/magento setup:upgrade (To clear compiled code and the cache. Typically, you can use magento setup:upgrade to update components and each component can require different compiled classes)
-
rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* var/session/* var/view_preprocessed/*
/pub/static/frontend/VendorName/themeName/*
(To remove all sub-directories under the var folder, and static files of the specific Magento 2 theme you use. For example, if you’re using our Megamall theme, the static file’s path should be
pub/static/frontend/Ubertheme/megamall/*)
- php bin/magento setup:static-content:deploy -t VendorName/themeName -f (for Magento 2.2 and above) OR
-
php bin/magento setup:static-content:deploy -t VendorName/themeName (for Magento 2.1 and older)
(To deploy static content for a store. Supposed that you use our Megamall theme, the VendorName/themeName should be Ubertheme/megamall. Make sure you are using developer or default mode when running this command. You should consult Magento 2 docs to learn more about static files deployment.)
- php bin/magento cache:flush (To flushing the Magento cache)
- php bin/magento maintenance:disable (To disable the maintenance mode)
- Step 3: Clear your browser cache.
So, these are the steps that you need to follow to complies the LESS file in CSS by using CLI.
What next?
What is Magento LESS Variables?
Magento LESS variable file is already provided by Magento. Follow below path:
magento233\vendor\magento\theme-frontend-luma\web\css\source\_variables.less
After this you can copy or directly create a custom theme web folder such as below path:
magento233\vendor\magento\theme-frontend-luma\web\css\source\_variables.less
Now paste this file
You can also create a new variable such as display:flex, width:100%.
For more details, have a look at below screenshot:
- Step 1: Create backups first including,
Hope you have now a good understanding of how to use LESS files, Magento 2 Less variables and Magento 2 theme Less. If you have any questions or looking to learn more about Magento 2 LESS, feel free to leave us a question in the comment section. Our team of Magento Experts will love to answer your queries.
