Learning Less.js

Creating mixins as functions

On our journey through creating and developing mixins, we've seen how you can hive off styles into groups and vary the output if needed, if it is set to receive values from the calling statements. We have not covered one area though, which is the use of functions within mixins—let's remedy this and take a brief look at what this means.

Any variable created inside a mixin is visible to the outside world and can be referenced from the calling statement. This means that within a mixin, we can call another mixin and reference any variable from within the second mixin:

.mixin() {
  @width:  50%;
  @height: 100px;
}

.caller {
  .mixin();
  width:  @width;
  height: @height;
}

The previous code, when compiled, results in:

.caller { width: ...