Σύνδεση Επιλογέων σε SASS
Μερικές φορές χρειαζόμαστε, κατά τη μεταγλώττιση εμφωλευμένων κατασκευών, αυτές να συνδέονται όχι με κενό, αλλά συγχωνευμένες. Για αυτό, πριν από το όνομα του εμφωλευμένου επιλογέα είναι απαραίτητο να τοποθετηθεί ένα σύμβολο &:
div {
&.block {
width: 300px;
}
}
Ως αποτέλεσμα, μετά τη μεταγλώττιση θα πάρουμε τον ακόλουθο κώδικα:
div.block {
width: 300px;
}
Πείτε μας ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
#block {
&.xxx {
width: 300px;
}
}
Πείτε μας ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
#block {
.xxx {
width: 300px;
}
}
Πείτε μας ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
#block {
&.xxx {
&.zzz {
width: 300px;
}
}
}
Πείτε μας ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
#block {
&.xxx {
.zzz {
width: 300px;
}
}
}
Πείτε μας ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
#block {
.xxx {
&.zzz {
width: 300px;
}
}
}
