Udvidelse af klasser i LESS
Ulempen ved mixins er, at det resulterer i kodedublering. Lad os se på et eksempel for at forstå, hvad der menes.
Antag, at vi har følgende kode:
.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
Denne kode vil kompileres på følgende måde, hvilket skaber dublering:
.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
Det ville være mere kompakt, hvis koden kompileredes på følgende måde:
.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
Dette kan opnås ved at bruge kommandoen &:extend,
som ikke indsætter mixingen direkte i
koden, men udvider den givne klasse. Lad os
rette vores kode:
.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
Forklar, hvad resultatet af kompileringen af følgende kode vil være:
.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
Forklar, hvad resultatet af kompileringen af følgende kode vil være:
.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
Forklar, hvad resultatet af kompileringen af følgende kode vil være:
.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
Forklar, hvad resultatet af kompileringen af følgende kode vil være:
.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
Forklar, hvad resultatet af kompileringen af følgende kode vil være:
.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}
