Mixin in LESS are group of CSS properties which have similarities to functions in other programming languages. LESS mixins allow us to include all the properties of an existing class or ids into another by including the class/id name as its property. The syntax and features of LESS mixin are closely related to the CSS. They can be declared in same way as we declare a CSS style rule, i.e, using a class or an ID selector. It can also be used to store more than one value and can be reused throughout the code whenever necessary.

LESS mixins can be used in different ways:

1. Making mixin disappear from the output
2. With Selectors as argument
3. Using Namespaces
4. Guarded Namespaces
5. !important keyword

Example 1: Simple LESS mixin where an existing id Square is included in other ids

#Square {

	background: #999;
	border-radius: 10px;
}

#MedSquare {

	width: 40px;
	height: 40px;
	#Square
}

#LargeSquare {

	width: 80px;
	height: 80px;
	#Square
}

After compilation CSS code will be:

#Square {

	background: #999;
	border-radius: 10px;
}

#MedSquare {

	width: 40px;
	height: 40px;
	background: #999;
	border-radius: 10px;
}

#LargeSquare {

	width: 80px;
	height: 80px;
	background: #999;
	border-radius: 10px;
}

Example 2: In case when you want to make mixins disappear from the output, you just need to add parenthesis after it.

#Square {

	background: #999;
	border-radius: 10px;
}

#MedSquare {

	width: 40px;
	height: 40px;
	#Square
}

#LargeSquare {

	width: 80px;
	height: 80px;
	#Square
}

After compilation CSS code will be:

#MedSquare {

	width: 40px;
	height: 40px;
	background: #999;
	border-radius: 10px;
}

#LargeSquare {

	width: 80px;
	height: 80px;
	background: #999;
	border-radius: 10px;
}

Example 3: Mixin do receive parameters.

#Square(@size: 30px) {

	background: #999;
	border-radius: 10px;
	width: @size;
	height: @size;
}

#MedSquare {
	
	#Square
}

#LargeSquare {
	
	#Square(110px)
}

After compilation CSS code will be:

#MedSquare {

	width: 30px;
	height: 30px;
	background: #999;
	border-radius: 10px;
}

#LargeSquare {

	width: 110px;
	height: 110px;
	background: #999;
	border-radius: 10px;
}

Other ways will be discussed in other blog. Till then Happy Coding :)