Less Compiler repeat (Duplicate) CSS rules (Definitions)

Sometimes After writing a new mixins (functions) for less and try to compiling the less files I find the produced css file include repeated definitions of the mixin children mixins , I mean that when writing a function like this :

In the LESS file I wrote the following:

.className{

h1{font-size:90%;}

p{font-size:80%;}

}



div.className;

In the output CSS file, It will be like this :

div.className h1{font-size:90%;}

div.className p{font-size:80%;}

div h1{font-size:90%;}

div p{font-size:80%;}

So, What is the Solution here ?
The problem showed a lack of knowledge in less mixins essentials . because when you create a mixin for a class, then in order to use it as a css class,  you should declare it  as a reference for the class of the element .So we will write or less file again as follows:

.className(){

h1{font-size:90%;}

p{font-size:80%;}

}



div.classname{

.className() ;

}

Now the output css file will be like the following:

div.className h1{font-size:90%;}

div.className p{font-size:80%;}