3kmwra
Last Updated: December 26, 2018
·
1.983K
· kytwb

Simple trick to optimize your LESS mixins libraries

When it comes to create a non-parametric mixin, the LESS homepage says :

.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

So you can do :

.container {
    .bordered
}

The thing in this code is that your .bordred mixin definition will be outputed to your CSS no matter what, even if you change your mind and finally don't want to use it in your .container.

To change this behavior, you can simply add empty parentheses right after you mixin name, so it becomes :

.bordered() {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

This is pretty useful if you want to keep a library of definitions that don’t add to the weight of the output until they are actually used.

Last but not least, it also helps with the naming; .bordered is a class I use as such, while .bordered() is a mixin.