Automatisez les sélecteurs nth-child avec Family.scss Mixins
Toupet est le meilleur moyen de gérer les CSS modernes et bibliothèques mixin peut économiser encore plus de temps au cours du cycle de développement.
Ces mixins fonctionnent comme codes ou fonctions automatisées que vous appelez vos fichiers Sass principaux. Certains mixins sont plus généraux alors que d’autres sont très spécifiques comme le Bibliothèque Family.scss.
Cette bibliothèque gratuite offre 26 mixins pour courrir complexe : nième enfant sélecteurs sans mémoriser tout ce code.
La plupart des développeurs connaissent le : nième enfant sélecteur et par défaut, ce n'est certainement pas compliqué. Vous simplement passer un sélecteur numérique, par exemple : nième enfant (2) où les règles de style d'appartenance s'appliquent à chaque deuxième enfant de l'élément parent.
Cependant, cela peut devenir beaucoup plus complexe lorsque vous souhaitez sélectionner éléments dynamiques (comme premier et dernier) ou lorsque vous souhaitez sélectionner un petite poignée d'éléments (comme les trois premiers enfants).
C'est ici que Family.scss peut aider. C'est une très petite bibliothèque qui contient 26 solutions pour les sélecteurs enfants allant de base à super complexe. Chaque mixin a une démo sur la page d'accueil, que vous pouvez parcourir et filtrer au besoin.
Voilà quelque exemples intéressants pour montrer ce que cette bibliothèque peut faire:
après-premier (5)- sélectionner tous les éléments après les 5 premiers enfantsde fin (3)- sélectionner le 3ème au dernier élément enfanttout-sauf (3)- sélectionner tous les enfants sauf le 3èmemême-entre (3, 12)- sélectionner tous les enfants, même entre les 3ème et 12ème éléments
Il y a des dizaines d'autres que vous pouvez parcourir et ils ont chacun des démos pour vous aider à visualiser leur fonctionnement.
Quelques mixins avancés compter sur des requêtes de quantité qui choisissent des éléments qui sont “au moins” ou “au plus” fixé à une certaine plage. Par exemple, vous pouvez sélectionner tous les enfants pour les éléments parents ayant au moins 5 enfants (ou plus)..
Ces idées peuvent être déroutantes lorsque vous les lisez, mais le démos en direct vraiment rendre tout clair.
Pour creuser, vous pouvez télécharger une copie de cette bibliothèque mixin du dépôt GitHub, avec toutes ces démos. Et, vous pouvez partager vos pensées ou vos questions avec le créateur du projet sur Twitter @LukyVJ.
