Automatizujte voliče nth-child s mixy Family.scss
Sass je nejlepší způsob, jak spravovat moderní CSS a knihovny knihoven ušetřit ještě více času během vývojového cyklu.
Tyto směsi fungují automatizované kódy nebo funkce zavoláte do svých hlavních souborů Sass. Některé mixiny jsou obecnější, zatímco jiné jsou velmi specifické, jako například Knihovna Family.scss.
Tato bezplatná knihovna nabízí 26 mixinů pro běh komplex : nth-dítě voliče bez zapamatování tohoto kódu.
Většina vývojářů ví o : nth-dítě volič a ve výchozím nastavení to rozhodně není složité. Jednoduše projít číselným voličem, například : nth-dítě (2) kde pravidla příslušného stylu platí pro každé druhé dítě nadřazeného prvku.
To však může být mnohem složitější, když chcete vybrat dynamické prvky (například první a poslední) nebo chcete-li vybrat možnost malá hrstka prvků (např. první tři děti).
To může pomoci Family.scss. Je to velmi malá knihovna a obsahuje 26 řešení pro dětské voliče od základního po superkomplex. Každý mixin má na domovské stránce demo, které můžete podle potřeby procházet a filtrovat.
Tady nějaké jsou zajímavé příklady ukázat, co může tato knihovna dělat:
po prvním (5)- po prvních 5 dětech vyberte všechny prvkyod konce (3)- vyberte třetí až poslední podřízený prvekall-but (3)- vyberte všechny děti kromě třetírovnoměrný (3, 12)- vyberte všechny i děti mezi 3. a 12. prvkem
Tam jsou desítky více můžete procházet a každý z nich má ukázky, které vám pomohou představit si, jak fungují.
Několik pokročilých mixinů spoléhat na kvantitativní dotazy které vybírají prvky, které jsou “alespoň” nebo “nejvíce” fixován na určitý rozsah. Můžete například vybrat všechny děti pro nadřazené prvky, které mají alespoň 5 dětí (nebo více).
Tyto myšlenky mohou být matoucí, když čteme o nich živá dema opravdu to všechno křišťálově čisté.
Chcete-li kopat, můžete stáhnout kopii této knihovny mixin z repo GitHub, spolu se všemi těmito ukázkami. A můžete sdílet své myšlenky nebo otázky s tvůrcem projektu na Twitteru @LukyVJ.
