Οι διαφορές μεταξύ Native CSS και Sass Nesting

Από τότε που κυκλοφόρησε, το CSS αρνήθηκε επίμονα να υποστηρίξει μια σύνταξη για ένθετους επιλογείς. Η εναλλακτική ήταν πάντα η χρήση ενός προεπεξεργαστή CSS όπως το Sass. Αλλά σήμερα, η ένθεση είναι επίσημα μέρος του εγγενούς CSS. Μπορείτε να δοκιμάσετε αυτήν τη δυνατότητα απευθείας σε σύγχρονα προγράμματα περιήγησης.

Εάν πραγματοποιείτε μετεγκατάσταση από το Sass, θα πρέπει να λάβετε υπόψη τυχόν διαφορές μεταξύ εγγενούς ένθεσης και ένθεσης Sass. Υπάρχουν ορισμένες βασικές διαφορές μεταξύ των δύο λειτουργιών ένθεσης και η γνώση αυτών είναι ζωτικής σημασίας εάν κάνετε την αλλαγή.

Πρέπει να χρησιμοποιήσετε το "&" με επιλογείς στοιχείων στο Native CSS

Το CSS Nesting εξακολουθεί να είναι μια πρόχειρη προδιαγραφή, με διαφορετική υποστήριξη του προγράμματος περιήγησης. Φροντίστε να ελέγξετε ιστότοπους όπως caniuse.com για ενημερωμένες πληροφορίες.

Ακολουθεί ένα παράδειγμα του τύπου ένθεσης που θα βλέπετε στο Sass, χρησιμοποιώντας τη σύνταξη SCSS:

.nav {
ul { display: flex; }
a { color: black; }
}

Αυτό το μπλοκ CSS καθορίζει ότι οποιαδήποτε μη ταξινομημένη λίστα μέσα σε ένα στοιχείο με α nav Η κλάση ευθυγραμμίζεται ως ευέλικτη στήλη, μονόδρομος διάταξη στοιχείων HTML στη σελίδα. Επιπλέον, όλο το κείμενο συνδέσμου αγκύρωσης μέσα σε στοιχεία με α nav η τάξη πρέπει να είναι μαύρη.

Τώρα, στο εγγενές CSS, αυτό το είδος ένθεσης δεν θα ήταν έγκυρο. Για να λειτουργήσει, θα πρέπει να συμπεριλάβετε το σύμβολο συμπλεκτικού (&) μπροστά από τα ένθετα στοιχεία, όπως:

.nav {
 & ul { display: flex; }
 & a { color: black; }
}

Η πρώιμη έκδοση της ένθεσης CSS δεν επέτρεπε την ένθεση επιλογέων τύπου. Μια πρόσφατη αλλαγή σημαίνει ότι δεν χρειάζεται πλέον να χρησιμοποιείτε το "&", αλλά οι παλαιότερες εκδόσεις του Chrome και του Safari ενδέχεται να μην υποστηρίζουν ακόμη αυτήν την ενημερωμένη σύνταξη.

Τώρα αν χρησιμοποιούσατε έναν επιλογέα που ξεκινά με ένα σύμβολο (π.χ. επιλογέας τάξης) για να στοχεύστε ένα συγκεκριμένο μέρος της σελίδας, μπορείτε να παραλείψετε το συμπλεκτικό σύμβολο. Έτσι, η ακόλουθη σύνταξη θα λειτουργούσε τόσο σε εγγενή CSS όσο και σε Sass:

.nav {
.nav-list { display: flex; }
.nav-link { color: black; }
}

Δεν μπορείτε να δημιουργήσετε νέο επιλογέα χρησιμοποιώντας το "&" στο Native CSS

Ένα από τα χαρακτηριστικά που πιθανότατα αγαπάτε στο Sass είναι η δυνατότητα να κάνετε κάτι σαν αυτό:

.nav {
 &-list { display: flex; }
 &-link { color: black; }
}

Αυτός ο κώδικας Sass μεταγλωττίζεται στο ακόλουθο ακατέργαστο CSS:

.nav-list {
display: flex;
}
.nav-link {
color: black;
}

Στο εγγενές CSS, δεν μπορείτε να δημιουργήσετε έναν νέο επιλογέα χρησιμοποιώντας το "&". Ο μεταγλωττιστής Sass αντικαθιστά το "&" με το γονικό στοιχείο (π.χ. .nav), αλλά το εγγενές CSS θα αντιμετωπίζει το "&" και το τμήμα μετά από αυτό ως δύο ξεχωριστούς επιλογείς. Ως αποτέλεσμα, θα προσπαθήσει να φτιάξει έναν σύνθετο επιλογέα, ο οποίος δεν θα δώσει το ίδιο αποτέλεσμα.

Αυτό το παράδειγμα θα λειτουργήσει σε εγγενές CSS, ωστόσο:

.nav {
 &.nav-list { display: flex; }
 &.nav-link { color: black; }
}

Αυτό λειτουργεί επειδή ο πρώτος επιλογέας είναι ο ίδιος με nav.nav-list σε απλό CSS και το δεύτερο είναι το ίδιο με nav.nav-link. Η προσθήκη διαστήματος μεταξύ του "&" και του επιλογέα θα ισοδυναμούσε με γραφή nav .nav-list.

Στο εγγενές CSS, εάν χρησιμοποιείτε το συμπλεκτικό σύμφωνο ως εξής:

.nav {
 &__nav-list { display: flex; }
 &__nav-link { color: black; }
}

Είναι το ίδιο με το να γράφεις αυτό:

__nav-list.nav {
display: flex;
}
__nav-link.nav {
color: black;
}

Αυτό μπορεί να σας εκπλήξει, λαμβάνοντας υπόψη ότι και οι δύο __nav-list και __nav-link βρίσκονται μέσα στο .nav εκλέκτορας. Αλλά το συμπλεκτικό σύμβολο στην πραγματικότητα τοποθετεί τα ένθετα στοιχεία μπροστά από το γονικό στοιχείο.

Η ιδιαιτερότητα μπορεί να είναι διαφορετική

Ένα άλλο πράγμα που πρέπει να σημειωθεί είναι ο αντίκτυπος στην εξειδίκευση που δεν συμβαίνει στο Sass αλλά συμβαίνει στην εγγενή ένθεση CSS.

Ας πούμε λοιπόν ότι έχετε ένα και ένα στοιχείο. Με το ακόλουθο CSS, ένα σε οποιοδήποτε από αυτά τα στοιχεία θα χρησιμοποιήσει μια γραμματοσειρά serif:

#main, article {
h2 {
font-family: serif;
 }
}

Η μεταγλωττισμένη έκδοση του παραπάνω κώδικα Sass είναι η εξής:

#mainh2,
articleh2 {
font-family: serif;
}

Αλλά η ίδια σύνταξη ένθεσης στο εγγενές CSS θα παράγει ένα διαφορετικό αποτέλεσμα, ουσιαστικά το ίδιο με:

:is(#main, article) h2 {
font-family: serif;
}

ο είναι() Ο επιλογέας χειρίζεται τους κανόνες ειδικότητας ελαφρώς διαφορετικά από την ένθεση Sass. Βασικά, η ιδιαιτερότητα των:είναι() αναβαθμίζεται αυτόματα στο πιο συγκεκριμένο στοιχείο στη λίστα με τα ορίσματα που παρέχονται.

Η σειρά των στοιχείων μπορεί να αλλάξει το επιλεγμένο στοιχείο

Η ένθεση σε εγγενές CSS μπορεί να αλλάξει εντελώς αυτό που πραγματικά σημαίνει ο επιλογέας (δηλαδή επιλέγει ένα εντελώς διαφορετικό στοιχείο).

Εξετάστε το ακόλουθο HTML, για παράδειγμα:

<divclass="dark-theme">
 <divclass="call-to-action">
 <divclass="heading"> Hellodiv>
div>
div>

Και το ακόλουθο CSS:

body { font-size: 5rem; }
.call-to-action.heading {
.dark-theme & {
padding: 0.25rem;
background: hsl(42, 72%, 61%);
color: #111;
 }
}

Αυτό είναι το αποτέλεσμα εάν χρησιμοποιείτε το Sass ως μεταγλωττιστή CSS:

Τώρα στο μπλοκ HTML, εάν επρόκειτο να μετακινήσετε το με την τάξη των σκοτεινό θέμα μέσα σε αυτό του πρόσκληση σε δράση, θα έσπασε τον επιλογέα (σε λειτουργία Sass). Αλλά όταν μεταβείτε σε κανονικό CSS (δηλαδή χωρίς προεπεξεργαστή CSS), τα στυλ θα συνεχίσουν να λειτουργούν.

Αυτό οφείλεται στον τρόπο που το :είναι() λειτουργεί κάτω από την κουκούλα. Έτσι, το παραπάνω ένθετο CSS μεταγλωττίζεται στο ακόλουθο απλό CSS:

.dark-theme:is(.call-to-action.heading) {
/* CSS code */
}

Αυτό προσδιορίζει α .επικεφαλίδα που είναι απόγονος και των δύο .σκοτεινό θέμα και .πρόσκληση σε δράση. Αλλά η σειρά αυτών δεν έχει μεγάλη σημασία. Όσο το .επικεφαλίδα είναι απόγονος του .πρόσκληση σε δράση και .σκοτεινό θέμα, λειτουργεί με οποιαδήποτε σειρά.

Αυτή είναι μια περίπτωση αιχμής και όχι κάτι που θα συναντήσετε τόσο συχνά. Κατανοώντας όμως το :είναι() Η υποκείμενη λειτουργικότητα του επιλογέα μπορεί να σας βοηθήσει να μάθετε πώς λειτουργεί η ένθεση στο CSS. Αυτό επίσης κάνει αποσφαλμάτωση του CSS σας πολύ ευκολότερο.

Μάθετε πώς να χρησιμοποιείτε το Sass στο React

Επειδή το Sass μεταγλωττίζεται σε CSS, μπορείτε να το χρησιμοποιήσετε με σχεδόν οποιοδήποτε πλαίσιο διεπαφής χρήστη. Μπορείτε να εγκαταστήσετε τον προεπεξεργαστή CSS σε έργα Vue, Preact, Svelte και—φυσικά—React. Η διαδικασία εγκατάστασης για το Sass για όλα αυτά τα πλαίσια είναι επίσης αρκετά απλή.

Το μεγαλύτερο πλεονέκτημα της χρήσης του Sass στο React είναι ότι σας επιτρέπει να γράφετε καθαρά, επαναχρησιμοποιήσιμα στυλ χρησιμοποιώντας μεταβλητές και mixins. Ως προγραμματιστής του React, το να γνωρίζετε πώς να χρησιμοποιείτε το Sass θα σας βοηθήσει να γράψετε πιο καθαρό, πιο αποτελεσματικό κώδικα και θα σας κάνει καλύτερο προγραμματιστή συνολικά.