Using:extend pseudo-class with one parameter in LESS file
LESS preprocessor delivers you extend
that extend rules in CSS classes. Look at the HTML file:
Let’s see less file:
.mainProp { color: orangered; } .extProp:extend(.mainProp) { background-color:yellowgreen; }
The less file compiles code into CSS file:
.mainProp, .extProp { color: orangered; } .extProp { background-color: yellowgreen; }
As you notice, thanks using the extend
pseudo-class you can extend rules in one class (extProp) about rules from other class. This other class is given as a parameter of extend
pseudo-class. Pseudo-class uses sign ‘:’.
Look at the HTML file:
AnimalsMy favorite animals
Pets
Dogs
Hamsters
And others animals
You see as the result:
The effect you obtain if you use instead of :extend
after name of selector: &:extend
with parameter inside the extended class. Look at the changed code less file:
.mainProp { color: orangered; } .extProp { &:extend(.mainProp); background-color:yellowgreen; }
Your CSS file will be the same. The work an extend pseudo-class is similar to the using mixins
. Which of them use? If you have to use any parameter, the good choice is mixins
, otherwise the better choice is :extend
.