Using extend inside a ruleset

In most use cases, the :extend() pseudo class will be put on the selector using the & parent referencing sign, as described in the Referencing parent selectors with the & operator recipe.

Getting ready

You can compile the Less code in this recipe with the command-line lessc compiler, as described in the Installing the lessc compiler with npm recipe in Chapter 1, Getting to Grips with the Basics of Less. You can edit the code in this recipe with your favorite text editor.

How to do it…

Write the following Less code into a file and compile this file with the command-line lessc compiler:

.class1{
  property: value;
} 
.class2 {
  &:extend(.class1);
}

You will find that the Less code will compile into the following CSS code:

 .class1, class2{
  property: value;
} 

There's more…

A common use case to use the :extend() pseudo class was shown in this recipe. This is to avoid the base or double CSS classes in the HTML markup. Because of the classes being merged, you...