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.

Benefits of using LESS CSS in Magento 2

Consider the following key pointers:

• Modularity: LESS CSS allows for modular and organised code structure, making it easier to manage and maintain stylesheets.
• Variables and Mixins: LESS CSS supports variables and mixins, enabling code reuse and efficient styling across multiple elements.
• Nesting: The nesting feature of LESS CSS allows for hierarchical styling, improving readability and reducing code redundancy.
• Faster Development: LESS CSS streamlines the development process by providing features like math operations, functions, and colour manipulation.
• Easy Customization: With LESS CSS, customising the default Magento 2 styles becomes simpler and more flexible.

Features of LESS CSS In Magento 2

• Dynamic Stylesheets: LESS CSS provides dynamic stylesheet capabilities. Also allows developers to use variables, mixins, and functions to create reusable and flexible styles.
• Variable Management: LESS CSS enables the use of variables to store and manage commonly used values such as colors, font sizes, and spacing. Hence, making it easier to maintain consistent styles throughout the project.
• Nesting: LESS CSS allows for nesting of CSS selectors. Hence, providing a more organized and intuitive way to write styles and reducing code duplication.
• Mixins and Functions: LESS CSS supports mixins and functions. Hence, enabling developers to define reusable blocks of styles and create dynamic styles based on conditions or calculations.
• Importing: LESS CSS allows for the modular organization of stylesheets by enabling the importing of other LESS files. As well as making it easier to manage and reuse styles across different components or pages.
• Operations and Calculations: LESS CSS provides arithmetic operations. Whilst allowing developers to perform calculations directly within the stylesheet, such as adding or subtracting values.

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’

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.

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

Integrating third-party libraries and frameworks with LESS CSS in Magento 2

• Identify Compatible Libraries: Choose third-party libraries and frameworks that are compatible with LESS CSS and Magento 2.
• Importing Stylesheets: Use the LESS @import directive to include the necessary stylesheets from the third-party library.
• Managing Dependencies: Ensure that any dependencies required by the library are properly included in your Magento 2 theme.
• Overriding Styles: Customize the styles provided by the third-party library by overriding or extending their CSS rules in your own fewer files.
• Organizing Stylesheets: Organize the stylesheets from the library logically within your Magento 2 theme structure.
• Compiling LESS: Compile the combined stylesheets, including both the third-party library and your custom styles, into CSS for use in your Magento 2 store.
• Testing and Debugging: Verify that the integration of the library does not conflict with any existing styles or functionality in Magento 2.

Debugging LESS CSS Issues in Magento 2- Techniques and Tools

• To view and debug the produced CSS styles, use browser developer tools like Chrome DevTools or Firefox Developer Tools. You may use it to zero in on individual items, examine the styles that have been applied, and discover and fix bugs.
• Magento 2’s developer mode must be used in order to compile unminified and human-readable CSS files. The produced CSS structure and any problems may thus be more easily identified.
• Constantly inspect the browser’s console for any LESS compilation-related JavaScript issues or warnings. Find a solution to these issues for reliable CSS production.
• Check Magento 2’s LESS Compilation Settings – Make sure your LESS compilation settings are correct. Make sure compilation is turned on and set up properly.
• Disable Caching- Temporarily disable the Magento 2 caching system during the debugging process to ensure that any changes to the LESS files are reflected immediately.

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.