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.