Tag: Mixins in less

Mixins allowed you to embed the whole properties of a class/id into another class/id just simply include the class/id name. It works like a variable but whole class/id properties. Mixins can behave like a function, it’s take arguments. lets see example

Example of Mixins :

.radius-corners(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}
.header{
  background-color: green;
  width: 500px;
  height: 100px;
  .radius-corners   /*Including the radius-corners class*/
}

Mixins with Argument :

.radius-corners(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}
.header{
  background-color: green;
  width: 500px;
  height: 100px;
  .radius-corners(20px);   /*Including the radius-corners class and passing parameter */
}

This is really easy to use and very much effective for working flow.