Automatiseer n-de-kind Selectors met Family.scss Mixins
Sass is de beste manier om moderne CSS en te beheren mixin bibliotheken kan nog meer tijd besparen tijdens de ontwikkelingscyclus.
Deze mixins werken als geautomatiseerde codes of functies die u in uw belangrijkste Sass-bestanden oproept. Sommige mixins zijn algemener, andere zijn heel specifiek, zoals de Family.scss-bibliotheek.
Deze gratis bibliotheek biedt 26 mixins om te rennen complex : N-kind selectors zonder al die code te onthouden.
De meeste ontwikkelaars weten van het : N-kind selector en standaard is dit zeker niet ingewikkeld. Jij gewoon een numerieke selector doorgeven, bijvoorbeeld : N-kind (2) waar de bijbehorende stijlregels van toepassing zijn op elk tweede kind van het bovenliggende element.
Dit kan echter veel complexer worden als u wilt selecteren dynamische elementen (zoals eerste & laatste) of wanneer u een wilt selecteren klein handjevol elementen (zoals de eerste drie kinderen).
Dit is waar Family.scss kan helpen. Het is een heel kleine bibliotheek en bevat 26 oplossingen voor kindselectoren variërend van eenvoudig tot supercomplex. Elke mixin heeft een demo op de startpagina, die je kunt doorbladeren en filteren waar nodig.
Hier zijn een paar interessante voorbeelden om te laten zien wat deze bibliotheek kan doen:
na de eerste (5)- selecteer alle elementen na de eerste 5 kinderenuit-einde (3)- selecteer het derde tot het laatste onderliggende elementgeheel maar (3)- selecteer alle kinderen behalve de derdezelfs tussen (3, 12)- selecteer alle zelfs kinderen tussen de 3e en 12e elementen
Er zijn er nog veel meer waar je doorheen kunt bladeren en ze hebben elk demo's om je te helpen visualiseren hoe ze werken.
Een paar geavanceerde mixins vertrouw op kwantiteitsvragen die pick-elementen die dat zijn “tenminste” of “hooguit” vastgesteld op een bepaald bereik. U kunt bijvoorbeeld alle kinderen selecteren voor bovenliggende elementen die minstens 5 kinderen (of meer) hebben.
Deze ideeën kunnen verwarrend zijn bij het lezen over hen, maar de live demo's maak het allemaal helemaal glashelder.
Om in te graven, kan je download een kopie van deze mixin-bibliotheek van de GitHub-repo, samen met al deze demo's. En u kunt uw gedachten of vragen delen met de maker van het project op Twitter @LukyVJ.
