A quick introduction to LESS files

LESS is one of two popular ways of creating CSS files for web pages. The other one is SASS. They have different strengths and characteristics. The AC core team picked LESS files with Grunt (and PHP) as the tool for compilation when the platform was created. The following are the main benefits of using LESS files over CSS files:

• Nested syntax
• Variables
• Mixins
• Modularity
• Functions and operations
• Compilation

Let’s look at each of these in a bit more detail.

Nested syntax

Let me start with the one that makes the code clear and easy to read. Let us look at the CSS first:

@media print {
    div.main .container .left-column {
        width: 20%;
    }
    div.main .container .left-column .product-wishlist {
        border: 1px solid silver;
    &...