The :extend()
pseudo class has been added to Less to merge selectors. In contrast to using a mixin to set the properties, the :extend()
pseudo class can also be applied for composite selectors. Merging selectors with the :extend()
pseudo class reduces the number of sectors that have the same properties in the compiled CSS code. Merged selectors reduce the size of your final CSS code.
In this recipe, you will compile two pieces of the Less code to see how the :extend()
pseudo class works.
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.