Αυτοματοποιήστε τους n-child επιλογείς με το Family.scss Mixins
Sass είναι ο καλύτερος τρόπος για να διαχειριστείτε το σύγχρονο CSS και mixin βιβλιοθήκες μπορεί να εξοικονομήσει ακόμα περισσότερο χρόνο κατά τη διάρκεια του κύκλου ανάπτυξης.
Αυτά τα mixins δουλεύουν όπως αυτοματοποιημένους κωδικούς ή λειτουργίες που καλείτε στα κύρια αρχεία Sass. Ορισμένα mixins είναι πιο γενικά ενώ άλλα είναι πολύ συγκεκριμένα, όπως το Βιβλιοθήκη Family.scss.
Αυτή η ελεύθερη βιβλιοθήκη προσφέρει 26 mixins για τρέξιμο συγκρότημα : n-παιδί επιλογείς χωρίς να απομνημονεύσει όλο αυτόν τον κώδικα.
Οι περισσότεροι προγραμματιστές γνωρίζουν το : n-παιδί επιλογέα και από προεπιλογή, σίγουρα δεν είναι περίπλοκο. Εσείς απλά περάστε έναν αριθμητικό επιλογέα, για παράδειγμα : nth-παιδί (2) όπου οι κανόνες στυλ ανήκουν σε κάθε δεύτερο παιδί του γονικού στοιχείου.
Ωστόσο, αυτό μπορεί να γίνει πολύ πιο περίπλοκο όταν θέλετε να επιλέξετε δυναμικά στοιχεία (όπως πρώτο & τελευταίο) ή όταν θέλετε να επιλέξετε ένα μικρή χούφτα στοιχεία (όπως τα τρία πρώτα παιδιά).
Αυτό είναι όπου το Family.scss μπορεί να βοηθήσει. Είναι μια πολύ μικρή βιβλιοθήκη και περιέχει 26 λύσεις για τους παιδικούς επιλογείς που κυμαίνονται από το βασικό έως το σούπερ συγκρότημα. Κάθε mixin έχει μια επίδειξη στην αρχική σελίδα, την οποία μπορείτε να περιηγηθείτε και να φιλτράρετε όπως είναι απαραίτητο.
Εδω είναι μερικά ενδιαφέροντα παραδείγματα για να δείξει τι μπορεί να κάνει αυτή η βιβλιοθήκη:
μετά την πρώτη (5)- επιλέξτε όλα τα στοιχεία μετά τα πρώτα 5 παιδιάαπό-τέλος (3)- επιλέξτε το στοιχείο 3ου έως τελευταίου παιδιούόλα-αλλά (3)- επιλέξτε όλα τα παιδιά εκτός από το 3οακόμη και μεταξύ (3, 12)- επιλέξτε όλα τα ζυγό παιδιά μεταξύ των 3 & 12 στοιχείων
Υπάρχουν δεκάδες ακόμα που μπορείτε να περιηγηθείτε και ο καθένας έχει demos για να σας βοηθήσει να απεικονίσετε πώς λειτουργούν.
Μερικά προηγμένα mixins να βασίζονται σε ερωτηματικές ποσότητες που επιλέγουν τα στοιχεία που είναι “τουλάχιστον” ή “στο μέγιστο” σε συγκεκριμένο εύρος τιμών. Για παράδειγμα, μπορείτε να επιλέξετε όλα τα παιδιά για γονικά στοιχεία που έχουν τουλάχιστον 5 παιδιά (ή περισσότερα).
Αυτές οι ιδέες μπορούν να προκαλέσουν σύγχυση όταν διαβάζουν γι 'αυτούς, αλλά με το live demos κάνει πραγματικά όλα τα καθαρά.
Για να σκάβετε, μπορείτε κατεβάστε ένα αντίγραφο αυτής της βιβλιοθήκης mixin από το repo GitHub, μαζί με όλα αυτά τα demos. Και, μπορείτε να μοιραστείτε τις σκέψεις ή τις ερωτήσεις σας με τον δημιουργό του έργου στο Twitter @LukyVJ.
