was successfully added to your cart.

How to use LESS in Magento 2

How to use LESS in Magento 2

In this tutorial, you’re going to learn what is LESS and application of LESS in Magento 2. You’re also going to learn how to do server side and client side LESS compilations.

Introduction

LESS (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. LESS is used with either Node.js or browser by using the link.

LESS is used to simply CSS. LESS is a CSS pre-processor, meaning that it extends CSS language, adding features that allow variables, mixins, functions, and many other techniques. The goal of using LESS is to make it more maintainable, themeable and extendable. LESS files are stored using .less extensions and on processing, it produces a .css file.

For Example: Look at this screenshot, compiled using: lessc styles.less styles.css. It creates styles.css which contains compiled LESS from style.less –

Less-in-magento-2

 

Use of LESS in Magento 2

Magento 2 supports LESS. 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.

In Magento blank theme,

<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>

 

In <head>, we can find following files, but if you check in the path

        <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

 

You will find that the file doesn’t exist, actually, you will find same name file but the extension will be .less instead of .css.

In this article, the aim to understand how .less files are compiled in Magento 2. Compilation of .less file consists of Server-side compilation mode and client-side compilation mode. Next two topics will explain the working of them.

Server Side LESS Compilation

This is the default compilation mode set in Magento settings under (Stores > Configuration > Advanced > Developer) Frontend Development workflow. This mode can be used in both: developer and production mode but with some limitation. In Server-side LESS compilation mode, the compilation is performed over server using LESS PHP library. The Limitations are:

  • Evaluation of JavaScript expressions within back-ticks
  • Definition of custom functions.

Let’s understand the flow of working:

  • Step 1: LESS pre-processor checks if the defined CSS file is found in the relative directory or not. If CSS file is found then it stops its execution otherwise proceed to the next step.
  • Step 2: If CSS file is not found, then LESS pre-processor finds the file of the same name with .less extension. If LESS files are not found then stops its execution otherwise proceed to next step.
  • Step 3: Reads .less file contents and resolve all @import directives (if any)
  • 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 generates relative CSS files to pub/static/frontend/<Vendor>/<theme>/<locale>/

In developer/production mode, before LESS compliation, you need to clean following directories:

  • pub/static/frontend/<Vendor>/<theme>/<locale>/
  • var/view_preprocessed/less

And then in Developer Mode, by loading the page only, the PHP LESS compiler will process .less files into .css files.

But in Production Mode, you need to deploy the CSS by using the following command in your terminal : php bin/magento setup:static-content:deploy

The default layout handle file to the frontend area looks alike this.

#File: /view/frontend/layout/default.xml<?xml version= “1.0”?>

<page xmlns:xsi = ” http://www.w3.org/2001/XMLSchema-instance”

layout= “1column”

xsi:noNamespaceSchemaLocation= “../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd”>

<head>

        <css src= “<theme-name>:<css-filename>.css”/ >

</head>

</page>

 

After making the above change, if your .css file doesn’t exist, the .less file is compiled to generate.css file. This is a page layout handle XML file, which means it understands the special head and body sections. The default handles fires on every page request. The contents of the head tag add the CSS file to the page. Next, add the following to your module. This is what happens in the server-side compilation.

 

Client Side LESS Compilation

To set this mode you need to navigate in Magento admin under (Stores > Configuration > Advanced > Developer) Frontend Development workflow and then set Client-side LESS compilation mode and then click on button Save Config.

Client-side LESS compilation mode works same in both (developer and production) mode. Client-side compilation is similar as server-side LESS compilation, but the difference is, it publishes on the last step (after reloading the page). Client-side compilation uses Less.js library. When Client-side compilation is enabled, Magento adds the following two javascript files to your page’s source.

 

 

In Client-side LESS compilation mode, the compilation is performed over client (browser) using lib/web/less/config.less.js and lib/web/less/less.min.js files.

The less.min.js file is the minified less.js source. The config.less.js file is a javascript configuration file used to configure less.js. Having these here enables client side Less compilation. Also, it changes external CSS link source, rel attribute from ‘stylesheet’ to ‘stylesheet/less’.

        From :<link rel= “stylesheet” type= “text/css”… />       

        To : < link rel= “stylesheet/less” type= “text/css”… />

 

Also importantly, when you’re running Magento in developer mode with client side LESS compilation on, Magento will serve LESS source files instead of CSS files, as the CSS is created dynamically when you load the page.

In client-side LESS compilation .less files are published to pub/static/frontend/<Vendor>/<theme>/<locale> directory. Also resolves @import directives with root source (.less) files.

You do not need to clear pub/static/frontend/<Vendor>/<theme>/<locale> every time you make any change in LESS file.

 

Wrapping up the Client-side compiling:

Step 1: Enabling client-side LESS compiling mode, the less.js library is enabled.

Step 2: config.less.js and less.min.js are added to every page.

Step 3: Each CSS link ‘rel’ attribute changes from ‘stylesheet’ to ‘stylesheet/less’

Step 4: .css files are created dynamically on page loading