Magento 2 includes LESS which stands for Leaner Style Sheets. LESS is a dynamic pre-processor style language used to extend the traditional style sheet in a more structured and reusable way run on the client side or server side. Magento 2 application provides a built-in LESS UI library which you can optionally extend.
What is CSS pre-processor?
CSS pre-processor is a scripting language that is an extension of CSS. It facilitates you to customize, manage and reuse the style sheets for the webpage. It provides features like variables, nesting, functions, mixins, and operations that help you build dynamic CSS.
Points to remember when working with LESS style in Magento 2
- Make sure that your Magento 2 application is set to the developer mode. If your style changes do not apply after refreshing the page, cleaning the static files cache might help.
- To customize front store styles, you need to create a custom theme, after that use one of the following approaches:
- If you created a theme, whose parent theme is Magento out of the box Blank or Luma, you can override the default LESS files. For example, to change the values of the variables used in the default files.
- Create your own custom LESS files using the built-in LESS pre-processor.
- Create your own custom CSS files, optionally having compiled those using third-party CSS pre-processor.
Once you create a theme, deciding which LESS compilation mode you will use before starting work on changes the styles is a best practice. There are two modes present in Magento 2, first is server-side compilation mode and second is client-side compilation mode. Creating and applying a theme is done before the compilation mode is selected, so it is described only once, but it is required. Server-side is the default mode for LESS compilation.
Doing simple style changes via server-side compilation mode
The following is an example of how the process of making simple changes looks like with the server-side LESS compilation mode:
- Create and apply a theme
- Add web/CSS/source/_extend.less in your theme directory
- Change the buttons color by adding the following code in _extend.less: LESS code redefining the color of the primary buttons
- Clean static files cache
- Refresh the page, and view the changes applied
Simple Style changes in server-side compilation mode using Grunt
Before using built-in Grunt, some prerequisite steps you need to take to be able to use it:
- Install node.js to any location on your machine
- Install Grunt CLI tool globally. To do this, run the following command in a command prompt:
- Rename the Gruntfile.js.sample to Gruntfiile.js and package.json.sample to package.json in your Magento instance directory
- After including Grunt, for your Magento instance. To do this, run the following commands in a command prompt
After successful installation of node packages in your Magento instance directory, it’s time to add your theme to Grunt configuration. To do this, in the dev/tools/grunt/configs/themes.js file, add your theme to the module.exports like following:
Important Grunt commands for Magento 2
Below table describes the grunt commands you can use for performing different customization tasks. Run all commands from your Magento instance directory.
Doing simple style changes via client-side compilation mode
- Create a new theme and apply it via Magento admin
- Add web/CSS/source/_extend.less in your theme directory
- Change the LESS compilation mode to client-side from Magento admin under STORES >
- Configuration > ADVANCED > Developer > Front-end development workflow > workflow type
- Clean static files cache manually or via command prompt
- Now open _extend.less file in your editor and change the color of the buttons by adding the below code for redefining the color of the primary buttons
- Refresh the page and view your changes applied
example: Customer login page where the background color of the button was changed.
If you are using the client-side compilation mode, to make your changes apply, you need to clean the earlier generated static view files.
In case of changes that are more sophisticated, you might need to manually clean the theme sub-directory in the pub/static/frontend directory.
