Extending Classes in LESS
The downside of mixins is that they result in code duplication. Let's look at an example to see what this means.
Let's say we have the following code:
.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
This code will compile as follows, producing duplication:
.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
It would be more compact if this code compiled like this:
.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
This can be achieved using the &:extend command, which does not insert the mixin directly into the code, but extends the given class. Let's fix our code:
.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
Tell me what the result of compiling the following code will be:
.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
Tell me what the result of compiling the following code will be:
.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
Tell me what the result of compiling the following code will be:
.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
Tell me what the result of compiling the following code will be:
.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
Tell me what the result of compiling the following code will be:
.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}
