Extinderea claselor în LESS
Dezavantajul mixin-urilor este că duce la duplicarea codului. Să ne uităm la un exemplu pentru a înțelege la ce ne referim.
Să presupunem că avem următorul cod:
styles.less.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
Acest cod va fi compilat în felul următor, generând duplicare:
styles.css.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
Ar fi mai compact dacă acest cod ar fi compilat în felul următor:
styles.css.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
Acest lucru poate fi realizat folosind comanda &:extend,
care nu inserează mixin-ul direct în
cod, ci extinde clasa specificată. Să
corectăm codul nostru:
styles.less.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
Spuneți care va fi rezultatul compilării următorului cod:
styles.less.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
Spuneți care va fi rezultatul compilării următorului cod:
styles.less.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
Spuneți care va fi rezultatul compilării următorului cod:
styles.less.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
Spuneți care va fi rezultatul compilării următorului cod:
styles.less.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
Spuneți care va fi rezultatul compilării următorului cod:
styles.less.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}