Estensione delle classi in LESS
Lo svantaggio dei mixin è che si ottiene una duplicazione del codice. Diamo un'occhiata a un esempio per capire cosa significa.
Supponiamo di avere il seguente codice:
.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
Questo codice verrà compilato nel modo seguente, generando duplicazione:
.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
Sarebbe più compatto se questo codice fosse compilato così:
.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
Questo può essere ottenuto utilizzando il comando &:extend,
che non inserisce il mixin direttamente nel
codice, ma estende la classe specificata. Correggiamo
il nostro codice:
.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
Descrivete quale sarà il risultato della compilazione del seguente codice:
.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
Descrivete quale sarà il risultato della compilazione del seguente codice:
.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
Descrivete quale sarà il risultato della compilazione del seguente codice:
.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
Descrivete quale sarà il risultato della compilazione del seguente codice:
.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
Descrivete quale sarà il risultato della compilazione del seguente codice:
.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}
