Zgjerimi i klasave në LESS
Disavantazhi i mixins është se rezulton duplikim i kodit. Le të shohim me një shembull, çfarë nënkuptohet.
Le të kemi këtë kod:
.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
Ky kod do të kompilohet si më poshtë, duke krijuar duplikim:
.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
Më kompakt do të ishte nëse ky kod do të kompilohej si më poshtë:
.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
Kjo mund të arrihet duke përdorur komandën &:extend,
e cila nuk e fut mix-in drejtpërdrejt në
kod, por e zgjan klasën e dhënë. Le të
korrigjojmë kodin tonë:
.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
Tregoni, si do të jetë rezultati i kompilimit të kodit në vijim:
.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
Tregoni, si do të jetë rezultati i kompilimit të kodit në vijim:
.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
Tregoni, si do të jetë rezultati i kompilimit të kodit në vijim:
.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
Tregoni, si do të jetë rezultati i kompilimit të kodit në vijim:
.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
Tregoni, si do të jetë rezultati i kompilimit të kodit në vijim:
.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}
