In this recipe, you will see how to use Less's :extend()
pseudo class to reduce the size of the compiled CSS code.
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. Use your favorite text editor to create and edit the Less files used in this recipe.
Write the following Less code into a Less file and compile this file with the command-line
lessc
compiler:.mixin() { property1: value; property2: value; } .class1 { .mixin; } .class2 { .mixin; }
You will find that the preceding Less code will compile into the following CSS code:
.class1 { property1: value; property2: value; } .class2 { property1: value; property2: value; }
Now rewrite your Less code, leveraging Less's
:extend()
pseudo class. Your Less code will now look as follows:.mixin { property1:...