Using mixins

Mixins play an important role in Less. You saw mixins in the preceding chapter when the rounded-corners example was discussed. Mixins take their naming conventions from object-oriented programming. They look like functions in functional programming, but in fact, act like C macros. Mixins in Less allow you to embed all the properties of a class into another class by simply including the class name as one of its properties, as shown in the following code:

.mixin(){
  color: red;
  width: 300px;
  padding: 0 5px 10px 5px;
}
p{
  .mixin();
}

The preceding code will get compiled in the following code:

p{
  color: red;
  width: 300px;
  padding: 0 5px 10px 5px;
}

In the final CSS code used on the website, every <p> paragraph tag will be styled with the properties defined in the mixin() function. The advantage will be that you can apply the same mixin on different classes. As seen in the rounded-corners example, you only have to declare the properties once.

Try opening less/mixins...