Up until now, we've used mixins to help reduce the need to write extra code, as we can call these blocks of code from our Less statements easily, to produce the desired effect.

Unfortunately this is still not without its own drawback. Let's say we create two rules, that both call the same mixin, and produce identical results (save for the rule name), then Less will interpret these as two separate blocks of code, even though they both perform the same styling on two different objects. What if we could merge these two rules together so that there is only one block of code, but which can be called by either rule?

Well, we can, with the use of the extend function in Less. This is a really powerful function, introduced for this purpose. Let's take a look at the concept to see how it works.

Imagine you have a mixin, such as this simple one:

.stuff { color: red; }
.foo { .stuff; }
.bar { .stuff; }

If we compile it using something like Crunch!, then it will...