Klasių plėtimas LESS
Miksinų trūkumas yra tas, kad gaunamas kodo dubliavimas. Pažiūrėkime pavyzdžiu, ką tai reiškia.
Tarkime, turime tokį kodą:
.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
Šis kodas bus sukompiliuotas taip, sukurdamas dubliavimąsi:
.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
Kompaktiškiau būtų, jei šis kodas būtų sukompiliuotas taip:
.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
To galima pasiekti naudojant komandą &:extend,
kuri neįmaišo miksinimo tiesiai į
kodą, o išplečia nurodytą klasę. Pataisykime
mūsų kodą:
.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:
.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:
.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:
.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:
.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:
.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}
