Magento 2 Theme LESS Usage

Magento 2 theme LESS usage

So you’ve heard about LESS usage and its application when it comes to Magento 2 theme. By cutting off duplicated codes, LESS minimize your CSS coding time and make front-end maintenance hassle-free. This is extremely valuable when it comes to Magento websites that contain many pages, sections, and serves users with multiple store views. Unlike website with bare CSS, websites use LESS takes only minutes to change the theme design and just some more minutes to deploy.

In this article, we cover basic knowledge about LESS: what is LESS, why use LESS instead of bare CSS, LESS file location in Magento 2 websites, and some commonly used variables of LESS.

What is LESS?

According to LESS Official website, “Less (which stands for Leaner Style Sheets) is a backward-compatible language extension for CSS”.

On the other hand, Wikipedia defines LESS as “a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side”.

Why use LESS instead of bare CSS?

There are 2 main benefits of using LESS that outperform bare CSS: reduce duplicated code, and easy code maintenance.

Reduce duplicated code

LESS has many functions that help reduce duplicated CSS. For example, nesting function in LESS can replace or be used in combination with CSS.

Let’s say we have the following CSS:

#footer {
  color: red;
}
#footer .contact-info {
  font-size: 10px;
}
#footer .logo {
  width: 350px;
}

In LESS, we can also write it this way:

#footer {
  color: red;
  .contact-info {
    font-size: 10px;
  }
  .logo {
    width: 350px;
  }
}

Now you can see you have a shorter code with the same function, which has the same structure as your HTML.

Easy code maintenance

Let’s say you style multiple components of your site: orange (#F87311).

#header, #sidebar .heading, #sidebar h2, #footer h3, .aside h3 { color: #F87311; }

Now if you want to change their values, you have to find and replace, and the more complex your website is, the more time you have to spend changing the code manually. With LESS, you can do so easily by changing just the value of a variable.

@main-color: #F87311;
#header { background-color: @main-color; }
#footer { color: @main-color; }
h3 { color: @main-color; }

Magento 2 default support .less file in multiple folder locations in theme_folder, out of which we can divide into 2 types: main theme .less files, and module-related .less files.

You can locate main theme .less files in theme_folder > web > css > source.

For example, let’s take Magento 2 default Luma theme.

vendor/magento/theme-frontend-luma/web/css/source

magento 2 theme main less file location

You can also locate module-related .less files in theme_folder > module_name > web > css > source >

For example, again with Luma theme:

vendor/magento/theme-frontend-luma/Magento_Sales/web/css/source

Magento 2 theme module less file location

For further reference, you can read more about Magento 2 .less file list in main theme folder. If you want your code to be well-organized, follow Magento 2 .less code standard.

Most commonly used variables of LESS

We give you some example of .less variables supported by Magento 2 default.

In the first example, we examine the file _responsive.less:

@screen__xxs: 320px;

@screen__xs: 480px;

@screen__s: 640px;

@screen__m: 768px;

@screen__l: 1024px;

@screen__xl: 1440px;

As you can see, Magento 2 has already had 6 screen size limit presets, and it would make responsive settings on your whole site hassle-free.

In the second example, we choose the file _typography.less:

//  Weights

@font-weight__light: 300;

@font-weight__regular: 400;

@font-weight__heavier: 500;

@font-weight__semibold: 600;

@font-weight__bold: 700;

There are 5 font weight presets – with easy-to-remember names – for you to choose when it comes to style text elements.

// Indent

@indent__base: @line-height__computed; // 20px

@indent__xl: @indent__base * 2; // 40px

@indent__l: @indent__base * 1.5; // 30px

@indent__m: @indent__base * 1.25; // 25px

@indent__s: @indent__base / 2; // 10px

@indent__xs: @indent__base / 4; // 5px

There are also 6 indent options presets in Magento 2.

Magento 2 theme LESS: in conclusion,

So there you go, the detailed Magento 2 theme LESS usage. In this article, we have discussed the What, the Why, the Where and have a glimpse at the How for the .less files in Magento 2. We hope that you have a good understanding of the topic to start coding right now.

As usual, do you have any more questions regarding Magento 2 theme .less practice? Feel free to leave us a question in the comment section below, and we would love to answer you in the scope of our knowledge.

You can also browse the themes we have spent all our time and pride on to develop below.

magento-2-theme-github our theme

About Claire Parsons

Nice to meet you. I'm a copywriter, content writer & digital marketer living in Southend-on-Sea, U.K.
Previous Easiest 4-step-guide to Translate Your Magento Theme Completely
Next Add New Theme to Magento 2 Website: Why and How?

Check Also

ebay-magento-themes

5 Magento 2 eBay Theme You Should Never Miss!

If you are pursuing the dream, which is to construct a popular marketplace on your …

Leave a Reply

Your email address will not be published. Required fields are marked *