Erweitern von Klassen in LESS
Der Nachteil von Mixins ist, dass es zu Code-Duplikation kommt. Schauen wir uns an einem Beispiel an, was damit gemeint ist.
Nehmen wir an, wir haben den folgenden Code:
.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
Dieser Code wird wie folgt kompiliert, was zu Duplikation führt:
.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
Kompakter wäre es, wenn dieser Code wie folgt kompiliert werden würde:
.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
Dies kann mit dem Befehl &:extend erreicht werden,
der nicht das Mixin direkt in den
Code einfügt, sondern die angegebene Klasse erweitert. Lassen Sie uns
unseren Code korrigieren:
.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussehen wird:
.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussehen wird:
.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussehen wird:
.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussehen wird:
.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussehen wird:
.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}
