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 .link selector, as it will be applied to .link-red as well.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.71.115