Utökning av klasser i LESS
Nackdelen med mixins är att det leder till kodduplicering. Låt oss titta på ett exempel för att förstå vad som menas.
Antag att vi har följande kod:
styles.less.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
Denna kod kommer att kompileras på följande sätt, vilket skapar duplicering:
styles.css.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
Det skulle vara mer kompakt om koden istället kompilerades på följande sätt:
styles.css.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
Detta kan uppnås genom att använda kommandot &:extend,
som inte injicerar mixin direkt i
koden, utan utökar den angivna klassen. Låt oss
rätta till vår kod:
styles.less.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
Berätta vad resultatet av kompileringen av följande kod blir:
styles.less.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
Berätta vad resultatet av kompileringen av följande kod blir:
styles.less.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
Berätta vad resultatet av kompileringen av följande kod blir:
styles.less.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
Berätta vad resultatet av kompileringen av följande kod blir:
styles.less.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
Berätta vad resultatet av kompileringen av följande kod blir:
styles.less.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}