Working with LESS

In Magento 1, the CSS of a Magento theme was stored in one big CSS file (the styles.css) but in Magento 2, it is completely different. The big CSS file has been replaced by a collection of LESS files.

LESS is a language that is used to generate CSS. CSS is very static. You can't use functions, variables, nesting, and so on but with LESS, you can.

Magento has a LESS pre-processor that generates a CSS file from the LESS files in the theme.

Getting ready

Open your favorite IDE and navigate to the theme folder of the Packt/cookbook theme that we have created in the previous recipes.

Access to a command line is also useful to work with Grunt.

How to do it…

The following steps describe how we can change the layout, such as how Magento 2 does it:

1. Copy the file app/design/frontend/Magento/blank/web/css/source/_theme.less to the folder app/design/frontend/Packt/cookbook/web/css/source/_theme.less.

   Note

   If you installed Magento 2 using composer, you have to copy the _theme.less file from the...