Magento 2 comes with many new features. Less CSS is one of them. Less stand for dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets and run on the client-side or server-side.

Why Use LESS?

The difference between LESS and CSS lies in the syntax because the LESS syntax is a little different from CSS. The stylesheet language is a CSS preprocessor.

LESS is a more normalized format, as compared to CSS; we can use different elements like Variables, Mixins, Nesting, etc. Here is an example;

How Plain CSS And Less CSS Look Different?

  • CSS Styles

.main-section {
position: relative;
padding: 20px 0;
margin: 0 0 15px;
background: #cccccc;
}
.main-section > .navigation

  • LESS Styles

// Variables
@grey-color: #cccccc;
@padding: 10px 0;

.main-section {
& {
position: relative;
padding: @padding;
margin: 0 0 15px;
background: @grey-color;
}
> .navigation {
display: block;
padding: @padding;
width: 100%;
font-style: 15px;
color: @grey-color;
&:hover {
text-decoration: none;
color: @grey-color;
background: @grey-color;
}
}
}

How To Configure LESS CSS On Server?

Before we start with Less, we need to install Node.js on our server. Please follow these steps to install Node js on your server.

Install Node.js On Server

Before you begin the process of installation, go to the Magento root directory and rename the existing files package.json.sample and Gruntfile.js.sample in your Magento root folder as package.json and Gruntfile.js respectively.

Go to your Magento root folder and then run the below command to setup and update NPM.

  • npm install

When the installation is complete, the node_modules folder will automatically appear inside the root folder of Magento 2.

  • Install Grunt CLI

Run the below commands to install Grunt CLI

npm install -g grunt-CLI

Add Your Theme In Grunt Configuration File

Open file [Magento_ROOT]/dev/tools/grunt/configs/themes.js

You will see that the default Magento theme is already there. Add your theme below the Magento theme, as shown below

module. exports
= {
…
[YOUR_THEME]: {
area: ‘frontend’,
name: ‘[YOUR_THEME_NAME]’,
locale: ‘en_US’,
files: [
‘CSS/styles-m’,
‘CSS/styles-l’
],
dsl: ‘less’
}
},

Create .less File And Compile With Grunt Commands

  • Go to your Theme directory

[Magento_ROOT]/app/design/frontend/[VENDOR]/[THEME]

  • Create below path if you have not created yet
  • Web/CSS/source
  • Create _extend.less & _custom.less
  • Include _custom.less file in _extend.less as @import ‘_custom.less’

LESS Compilation

Once you are done with the above steps, you can check the grunt status and compile CSS using the below commands.

You need to make sure that you run the commands from your Magento installation directory to avoid any unforeseen circumstances.

  • grunt clean: demo
  • Removes any static files that are theme-related. You must remove it from pub/static and var directories.
    grunt exec: demo
  • You must re-publish all the symlinks to the source files to the pub/static/frontend/ directory.
    grunt less: demo
  • Compile all the.CSS files using the symlinks that are published in the pub/static/frontend/ directory
  • chmod 0777 -R var/* pub/static/* generated/*
  • grunt watch
  • To track the changes in the source files, recompiles.CSS files, and reload the page in the browser

LESS File Compilation Mode

There are two types of compilation mode:

  • Server-side Less Compilation Mode
  • Client-side Less Compilation Mode

Server-side Less Compilation Mode

Server-side less compilation mode is a default compilation mode that can be used in both developer and production but has some limitations in the server-side less compilation mode.

To change the mode, you must follow this path:
(Stores > Configuration > Advanced > Developer) Frontend Development workflow.

Here are the steps that show how to lessen the preprocessor’s work in our server-side compilation mode;

  • Preprocessor checks if the requested CSS file is not found in the directory. If the CSS file is found then stop the CSS file execution and proceed to the next step.
  • On the off chance that CSS record isn’t discovered, then the LESS preprocessor finds the file of the same name with .less augmentation. If LESS records are not discovered, then its execution generally continues to the next step.
  • Read the .less file contents, and resolve all @import directives. For example

//@Magento_import ‘source/_module.less’; // Theme modules
//@Magento_import ‘source/_extend.less’; // Extend for minor customization

  • Resolve all .less file paths of LESS files using Magento fallback mechanism,and put LESS files under;

[Magento_ROOT]/var/view_preprocessed/less

  • All source files must pass through the PHP Less compiler. The resulting compiled.CSS files are generated to;

[Magento_ROOT]/pub/static/frontend/directory.

So, the above processes are to generate CSS files from LESS using the PHP LESS compiler.

Client-side Less Compilation Mode

Client-side less compilation mode flow the same as in both (developer and production) mode.

In Client-side LESS compilation mode, the compilation process is performed over the client (browser). The files are then published to;

[Magento_ROOT]/pub/static/frontend/Vendor/theme/locale directory:
[Magento_ROOT] source (.less) files with resolved @Magento_import directive.

Symlinks do not contain any @import files at the time of execution.

Recursively, all the symlinks are imported by all the @Magento_import and @import directives.

Wrapping-Up

We hope that this blog helps you in integrating LESS CSS in Magento2. While this blog just scratches the surface on Magento 2 integration, it is a start. Watch this space for more informative content on various IT related topics. Feel free to drop a comment in case of any query.