Extend pseudo-class

Another great feature is the LESS :extend pseudo-class, which can be used to apply all properties of a class to another class, optionally including, using the all keyword, all the child classes and pseudo-classes. To use a quick example, take the following CSS code:

.link { 
    color: white; 
    background-color: blue; 
} 
 
.link:before { 
    content: ">"; 
} 
 
.link-red { 
    color: white; 
    background-color: red; 
} 
 
.link-red:before { 
    content: ">"; 
} 

This can be conveniently written this way using LESS:

.link { 
    color: white; 
    background-color: blue; 
    :before { 
        content: ">"; 
    } 
} 
 
.link-red { 
    &:extend(.link all); 
    background-color: red; 
} 

Note how, since we've used the all keyword, we don't have to repeat the :before pseudo-class of the base ...

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.