Επέκταση Κλάσεων σε LESS
Το μειονέκτημα των mixins είναι ότι οδηγεί σε διπλασιασμό κώδικα. Ας δούμε με ένα παράδειγμα τι εννοούμε.
Ας υποθέσουμε ότι έχουμε τον ακόλουθο κώδικα:
styles.less.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
Αυτός ο κώδικας θα μεταγλωττιστεί ως εξής, δημιουργώντας διπλασιασμό:
styles.css.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
Θα ήταν πιο συμπαγές αν αυτός ο κώδικας μεταγλωττιζόταν ως εξής:
styles.css.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
Αυτό μπορεί να επιτευχθεί χρησιμοποιώντας την εντολή &:extend,
η οποία δεν εισάγει το mixin απευθείας στον
κώδικα, αλλά επεκτείνει τη δεδομένη κλάση. Ας
διορθώσουμε τον κώδικά μας:
styles.less.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
styles.less.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
styles.less.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
styles.less.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
styles.less.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
styles.less.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}