Automazione dei selettori nth-child con Family.scss Mixins
insolenza è il modo migliore per gestire i moderni CSS e librerie di missaggio può risparmiare ancora più tempo durante il ciclo di sviluppo.
Questi mixin funzionano come codici o funzioni automatizzate che chiami nei tuoi file Sass principali. Alcuni mix sono più generici mentre altri sono molto specifici come il Libreria Family.scss.
Questa libreria gratuita offre 26 mixin per correre complesso : Nth-child selettori senza memorizzare tutto quel codice.
La maggior parte degli sviluppatori conosce il : Nth-child selettore e, di default, non è certamente complicato. Semplicemente passare un selettore numerico, per esempio : Nth-child (2) dove le regole di stile di appartenenza si applicano a ogni secondo figlio dell'elemento genitore.
Tuttavia, questo può diventare molto più complesso quando si desidera selezionare elementi dinamici (come prima e ultima) o quando si desidera selezionare a piccola manciata di elementi (come i primi tre figli).
Questo è dove Family.scss può aiutare. È una libreria molto piccola e contiene 26 soluzioni per i selettori di bambini che vanno dal semplice al super complesso. Ogni mixin ha una demo sulla home page, che puoi sfogliare e filtrare secondo necessità.
Qui ce ne sono alcuni esempi interessanti per mostrare cosa può fare questa libreria:
dopo-prima (5)- seleziona tutti gli elementi dopo i primi 5 figlida-end (3)- seleziona il terzo elemento figlio ultimotutto-ma (3)- seleziona tutti i bambini tranne il 3 °in mezzo (3, 12)- seleziona tutti i bambini pari tra il 3 ° e il 12 ° elemento
Ci sono dozzine in più che puoi sfogliare e ognuno di loro ha delle demo per aiutarti a visualizzare come funzionano.
Alcuni mixaggi avanzati fare affidamento sulle domande di quantità che scegli elementi che sono “almeno” o “al massimo” fissato su un determinato intervallo. Ad esempio, puoi selezionare tutti i bambini per gli elementi parent con almeno 5 figli (o più).
Queste idee possono essere fonte di confusione quando si legge su di esse, ma il demo live davvero tutto chiaro.
Per scavare, puoi scarica una copia di questa libreria mixin dal repository GitHub, insieme a tutti questi demo. E puoi condividere i tuoi pensieri o domande con il creatore del progetto su Twitter @LukyVJ.
