Using duplicate mixin names

When your Less code contains one or more mixins with the same name, the Less compiler compiles them all into the CSS code. If the mixin has parameters (see the Building a switch to leverage argument matching recipe) the number of parameters will also match.

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. Use your favorite text editor to create and edit the Less files used in this recipe.

How to do it…

1. Create a file called mixins.less that contains the following Less code:

   .mixin(){ 
     height:50px; 
   } 
   .mixin(@color) { 
     color: @color; 
   } 
   
   .mixin(@width) { 
     color: green; 
     width: @width; 
   } 
   
   .mixin(@color; @width) { 
     color: @color; 
     width: @width; 
   } 
   
   .selector-1 { 
     .mixin(red); 
   } 
    
   .selector-2 { 
     .mixin(red; 500px); 
   }

2. Compile the Less code from step 1 by running the following command...