Using in LESS :extend pseudo-class with ALL keyword

In this post example below explains what does do ALL in parametrs :extend psuedo-class in LESS Look at our less file:

.nice {
    color: cornflowerblue;
}
.nice.first {
    font-variant: small-caps;
}
.nice.second {
    font-size: 22px;
}

.extProp {
    &:extend(.nice all);
    background-color:gold;
}

and see CSS file after compiled LESS file:

.nice,
.extProp {
  color: cornflowerblue;
}
.nice.first,
.extProp.first {
  font-variant: small-caps;
}
.nice.second,
.extProp.second {
  font-size: 22px;
}
.extProp {
  background-color: gold;
}

And it is our HTML file:

<!DOCTYPE html>
<html>
    <head>
        <title>Animals</title>
        <link rel="stylesheet" href="myStyle.css"  type="text/css" >
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>My favorite animals</h1>
        
        <div><p>Dogs (without CSS class)</p></div>
        
        <div class='nice'><p>Cats (nice)</p></div>
        
        <div class='nice first'><p>Hamsters (nice first)</p> </div>
        
        <div class='nice second'><p>Pandas (nice second)</p> </div>
        
        <div class='extProp'><p>Tigers (extProp)</p></div>  
        
        <div class='extProp nice'><p>Bears (extProp nice)</p></div>
        
        <div class='extProp first'><p>Monkeys (extProp first)</p></div>
        
        <div class='extProp second'><p>Lamas (extProp second)</p></div>
        
        <div class='extProp first second'><p>Elephant (extProp first second)</p></div>
    </body>
    
</html>

The effect runs the website:

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.