# Less Mixins

This chapter explains about Less Mixins, its types including Simple Less Mixins and Parametric Mixins.

Less mixin is a common group of CSS properties grouped into one property, so that it gets inserted into various other Less selectors.

All the properties of a class can be embedded into another class by just simply including the class name as one of the properties using Mixins.

## Simple Less Mixins

Simple Mixins are nothing but a function without parameters. The property described in the Mixins can be obtained by placing the class. Below code explains the simple mixins that declare the margin and padding to zero.

Less code

.margin-padding-zero()
{
margin:0px;
}
div.container
{
}

Compiled css code

div.container
{
margin:0px;
}

The following are the different types of Mixins.

### Not Outputting the Mixin

If you don’t need the created Mixin to be an output, put parentheses after it.

.my-mixin {
color: red;
}
.my-other-mixin() {
background: black;
}
.class {
.my-mixin;
.my-other-mixin;
}

.my-mixin {
color: red;
}
.class {
color: red;
background: black;
}

### Selectors in Mixins.

Mixins not only contain just properties, but also contain selectors too.

.my-hover-mixin() {
&amp;:hover {
border: 1px solid black;
}
}
button {
.my-hover-mixin();
}

button:hover {
border: 1px solid black;
}

### Namespaces

Multiple id’s or classes can be included in mixin properties inside a more complicated selector using the Namespaces.

The below sample code explains how to use namespaces in less.

#my-library {
.my-mixin() {
color: black;
}
}
// which can be used like this
.class {
#my-library &gt; .my-mixin();
}

Here, both the symbol “>” and the white spaces are optional.

### Guarded Namespaces

In the case, when a guard is applied to namespace, the mixins defined by it are only used if guard condition returns true. Namespace guard is similar to guard in mixins.

#namespace when (@mode=huge) {
.mixin() { /* */ }
}
#namespace {
.mixin() when (@mode=huge) { /* */ }
}

As all the nested namespaces and mixins are assumed to have the same default function value, the following are the mixin that are never evaluated and the guards are guaranteed to be false.

#sp_1 when (default()) {
#sp_2 when (default()) {
.mixin() when not(default()) { /* */ }
}
}

### The !important keyword

Use the !important keyword to override a particular property. All the inherited properties are marked as !important by placing after mixin call.

.foo (@bg: #5858FA, @color: #FE2E64) {
background: @bg;
color: @color;
}
.unimportant {
.foo();
}
.important {
.foo() !important;
}

.unimportant {
background: #5858FA;
color: #FE2E64;
}
.important {
background: #f5f5f5 !important;
color: #FE2E64 !important;
}

## Parametric mixins

Parametric mixins are used to extend the functions of less mixins so that they can accept one or more parameters. By using this parametric mixins, one can customize the mixin output based on what is passed through the parameter.
Below example explains simple parametric mixins for Text shadow property.

The Text shadow property has four parameters, they are.

To use all the parameters, one need to use the @arguments.

Less code

.my_text_shadow(@hs: 0, @vs: 0, @blur: 2px, @color: #FFFFFF)
{
}
h1
{
}
h2
{
}


Compiled CSS code.

h1
{
}
h2
{
}


### Example

The example explains the Less Mixins uses.
The below conceptual diagram represents the overall view about the below example like creating .html and .less files in node js folder and compiling .less to .css.
Create an HTML file in Nodejs folder as shown below.

Mixins.html

<html>
<title&gt;Less Mixins&lt;/title>
<body>
<h1>Welcome to SPLessons</h1>
<p class="p1">Less mixin is a common group of CSS properties grouped into one property</p>
<p class="p2">Mixins can also take arguments, which are variables passed to the block of selectors when it is mixed in.</p>
<p class="p3">Parametric mixins have default values for their parameters.</p>
</body>
</html>


Create Less file in the same Nodejs as shown below.

style.less

h1{
color:blue;
}
.p1{
color:black;
}
.p2{
background : #64d9c0;
.p1();
}
.p3{
background : #F3E2A9;
.p1;
}


Compile the above code in the command prompt by using the following command.

lessc style.less style.css

By compiling the above .less file, it automatically generates the .css file as shown below.

style.css

h1 {
color: blue;
}
.p1 {
color: black;
}
.p2 {
background: #64d9c0;
color: black;
}
.p3 {
background: #F3E2A9;
color: black;
}


After making all the required changes, you need to run the html file in a browser to get the following code.

## Summary

• Mixins are CSS properties grouped into one property, which are inserted into Less selectors.
• Output can be customized by using less mixins.

• Make sure that both the HTML and Less files are created in the Nodejs folder.
• Check all the required changes before running the file to get the output.