Hello, Magenest Blog readers!

 

Thanks to LESS, a CSS pre-processor, admins can simplify their management of complex CSS files. Today, we will guide you on how to create and extend styling .less file in Magento 2.

 

1. Understanding Less

 

Magento 2 uses a CSS pre-processor called Less. With Less, developers can write their styles better. They can use also variables & functions like programing language to applied for colors, position, etc.

 

This is a snippet Less code in Magento 2.

 

.abs-action-pattern {
   &[disabled],
   &.disabled {
       cursor: default;
       opacity: @disabled__opacity;
       pointer-events: none;
   }

   border: @button__border-size @button__border-style;
   border-radius: 0; // ToDo UI Delete with admin scope
   display: inline-block;
   font-family: @button__font-family;
   font-size: @button__font-size;
   font-weight: @font-weight__semibold;
   line-height: @button__line-height;
   padding: @button__padding-top @button__padding-horizontal @button__padding-bottom;
   text-align: center;
   vertical-align: baseline;
}

.abs-action-l {
   font-size: @font-size__l;
   letter-spacing: .025em;
   padding-bottom: @button__padding-vertical__l;
   padding-top: @button__padding-vertical__l;
}

.abs-action-delete {
   &:extend(.abs-action-reset all);
   &:extend(.abs-icon all);
   display: inline-block;
   font-size: 1.6rem;
   margin-left: 1.2rem;
   padding-top: .7rem;
   text-decoration: none;
   vertical-align: middle;

   &:after {
       color: @color-very-dark-gray;
       content: @icon-delete__content;
   }

   &:hover {
       &:after {
           color: @color-very-dark-gray-black2;
       }
   }

   > span {
       &:extend(.abs-visually-hidden all);
   }
}

 

As you can see, this code is very similar like CSS. But it seems to have things like the variable is different. Developers can write Less code then Magento will compile it with the program like less to CSS file.

 

2. Write your first less file

 

Next, we're going to add first .less file to Magento 2. Make sure that you are running in developer mode.

 

Create your less file:

 

/* File: app/code/Magenest/Less/view/frontend/web/first-less.less */
@red-color: #FF0000;
body
{
    background-color:@red-color;
} 

 

Once your file is created, add this following line in your layout file in frontend area.

 

<head>
        <css src="Magenest_Less::first-less.css"/>
</head>

 

After that, clear your cache and reload the home page. You should now see a red background color. Congratulations! You just created your first Less source file.

 

When Magento 2 process layout, Magento will search for this file (first-less.css) in the following location. If the file cannot be found, Magento will search again but the other file .css. Magento will find .less file with the same name.

 

When Magento finds the .less file, it will be converted to CSS, and a CSS file is generated in pub/static directory. After all, the file that you see is .css file, not .less file.

 

3. Extend Less file

 

To extend the parent theme’s styles in your theme:

 

Step 1: In your theme directory, create a web/css/source sub-directory.

 

Step 2: Create a _extend.less file there. The path to it looks like following:

 

<theme_dir>/
 │  ├── web/
 │  │   ├── css/
 │  │   │   ├── source/
 │  │   │      ├──_extend.less
 ...

 

Step 3Add your Less code in this file.

 

Extending a theme using _extend.less is the simplest option when you are happy with everything the parent theme has, but want to add more styles.

 

The simplest way to override parent styles

 

To override parent styles (that is, override default Magento UI library variables):

 

Step 1: In your theme directory, create a web/css/source sub-directory.

 

Step 2: Create a _theme.less file here. The path to it then looks like the following:

 

<theme_dir>/
 │  ├── web/
 │  │   ├── css/
 │  │   │   ├── source/
 │  │   │      ├──_theme.less
 ...

 

It is important to remember that your _theme.less overrides the parent _theme.less.

 

Step 3:  Copy all the variables you need from the parent _theme.less, including those which will not be changed. For example, if your theme inherits from Blank, the _theme.less you should copy from is located at <Magento_Blank_theme_dir>/web/css/source/_theme.less.

 

Step 4Make the necessary changes.

 

The drawback of this approach is that you need to monitor and manually update your files whenever the parent’s _theme.less is updated.

 

Extend the component’s styles

 

Step 1In your theme directory, create a web/css/source sub-directory.

 

Step 2Add _buttons_extend.less and _extend.less here. The path to the files looks like the following:

 

<theme_dir>
 │  ├── web/
 │  │   ├── css/
 │  │   │   ├── source/
 │  │   │      ├──_buttons_extend.less
 │  │   │      ├──_extend.less
 ...

 

Step 3In _buttons_extend.less add your styles for the button component.

 

Step 4In _extend.less register the _buttons_extend.less by adding the following code: @import '_buttons_extend.less';

 

Override component’s styles

 

To override the parent theme’s styles for buttons in your theme:

 

Step 1In your theme directory, create a web/css/source sub-directory.

 

Step 2:  Create a _buttons.less file here. The path to it looks like the following:

 

<theme_dir>/
 │  ├── web/
 │  │   ├── css/
 │  │   │   ├── source/
 │  │   │      ├──_buttons.less
 ...

 

Step 3This file overrides the _buttons.less of the parent theme.

 

Step 4:  Add your styles for the button component. If the file is left blank, then no styles are applied for the component.

 

4. Bottom line

 

This is a very simple instruction about creating and extending .less file in Magento 2. If you want to learn more, the Cascading Style Sheets sections of Magento dev docs could provide more detailed information.

 

Understanding how Magento working to generate CSS from .less file is very important when working with Magento 2 systems.

 

If there's something else that we can assist with, leave your comments here.