Automatizujte n-dieťa selektory s mixmi Family.scss

Sass je najlepší spôsob, ako spravovať moderné CSS a mixin knižnice môže počas vývojového cyklu ušetriť ešte viac času.

Tieto mixiny fungujú podobne automatizované kódy alebo funkcie ktoré voláte vo svojich hlavných súboroch Sass. Niektoré zmesi sú všeobecnejšie, zatiaľ čo iné sú veľmi špecifické, ako napr Knižnica Family.scss.

Táto bezplatná knižnica ponúka 26 mixinov na spustenie komplexné : Nth-child selektory bez zapamätania si celého kódu.

Väčšina vývojárov vie o : Nth-child selektor a štandardne to určite nie je zložité. Jednoducho prejdite číselným voličom, napríklad : Nth-child (2) kde pravidlá štýlu príslušného štandardu platia pre každé druhé dieťa rodičovského prvku.

To však môže byť oveľa zložitejšie, ak chcete vybrať dynamické prvky (ako prvé a posledné) alebo ak chcete vybrať položku a malá hrsta prvkov (ako prvé tri deti).

Tu pomáha Family.scss. Je to veľmi malá knižnica a obsahuje 26 riešení pre detské selektory od základných až po superzložité. Každý mixin má na domovskej stránke demo, ktoré môžete podľa potreby prehliadať a filtrovať.

Tu sú nejaké zaujímavé príklady aby ste dokázali, čo môže táto knižnica robiť:

• po-prvej (5) - vyberte všetky prvky po prvých 5 deťoch
• z-konca (3) - vyberte prvok 3. až posledný
• všetky, ale (3) - vyberte všetky deti okrem 3.
• rovnomerne medzi (3, 12) - vyberte všetky deti rovnomerne medzi 3. a 12. prvkami

Existuje tu desiatky, ktoré môžete prehliadať a každý z nich má ukážky, ktoré vám pomôžu predstaviť si, ako fungujú.

Niekoľko pokročilých mixinov spoliehať sa na kvantitatívne otázky ktoré vyberajú prvky, ktoré sú “najmenej” alebo “najviac” v určitom rozsahu. Môžete napríklad vybrať všetky deti pre nadradené prvky, ktoré majú najmenej 5 detí (alebo viac).

Tieto myšlienky môžu byť mätúce pri čítaní o nich, ale o tom živé ukážky naozaj to všetko jasne.

Ak chcete vykopať, môžete stiahnuť kópiu z tejto knižnice mixin z replikácie GitHub spolu so všetkými týmito ukážkami. Môžete zdieľať svoje myšlienky alebo otázky s tvorcom projektu na Twitter @LukyVJ.