Mixins

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: ...

Get ASP.NET Core 2 and Angular 5 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.