Being able to not repeat ourselves is a key principle of all computer programming languages; however, it's not easy to respect that within standard CSS files, because we will often be forced to write something like this:
.button-s { background-color: blue; border: 1px solid black; border-radius: 5px; font-family: Verdana; font-size: 0.8em; width: 100px; } .button-m { background-color: blue; border: 1px solid black; border-radius: 5px; font-family: Verdana; font-size: 1em; width: 200px; } .button-l { background-color: blue; border: 1px solid black; border-radius: 5px; font-family: Verdana; font-size: 1.2em; width: 300px; }
With LESS, we can shrink it into this:
.button-s { background-color: blue; border: 1px solid black; border-radius: 5px; font-family: Verdana; font-size: 0.8em; width: 100px; } .button-m { .button-s; font-size: 1em; width: 200px; } .button-l { .button-s; font-size: 1.2em; width: 300px; }
In other words, a mixin is a selector reference within another selector. That's another great feature that can save us a lot of time whenever we're dealing with large CSS files.