O'Reilly logo

Magento 2 Development Cookbook by Bart Delvaux

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required