Mājas lapa » Kodēšana » Automatizējiet n-bērna atlasītājus ar Family.scss Mixins

    Automatizējiet n-bērna atlasītājus ar Family.scss Mixins

    Sass ir labākais veids, kā pārvaldīt mūsdienu CSS un mixin bibliotēkas attīstības cikla laikā var ietaupīt vēl vairāk laika.

    Šie maisījumi darbojas kā automatizēti kodi vai funkcijas ka jūs zvanāt galvenajos Sass failos. Daži maisījumi ir vispārīgāki, bet citi ir ļoti specifiski, piemēram, Family.scss bibliotēka.

    Šī bezmaksas bibliotēka piedāvā 26 maisījumi darbojas komplekss : n-bērns selektori neaizmirstot visu šo kodu.

    Lielākā daļa izstrādātāju zina par : n-bērns selektors un pēc noklusējuma tas noteikti nav sarežģīts. Jūs vienkārši iziet ciparu selektoru, piemēram : n-bērns (2) kur piederības stila noteikumi attiecas uz katru otrā vecāka elementa bērnu.

    Tomēr, ja vēlaties izvēlēties, tas var kļūt daudz sarežģītāks dinamiskie elementi (piem., pirmais un pēdējais) vai, ja vēlaties izvēlēties a neliels skaits elementu (piemēram, pirmie trīs bērni).

    Šeit var palīdzēt Family.scss. Tā ir ļoti maza bibliotēka, un tajā ir 26 risinājumi bērnu izvēlei sākot no pamata līdz super kompleksam. Katram mixin mājas lapā ir demonstrācija, kuru varat pārlūkot un filtrēt pēc vajadzības.

    Te ir daži interesanti piemēri lai parādītu, ko šī bibliotēka var darīt:

    • pēc pirmās (5) - atlasiet visus elementus pēc pirmajiem 5 bērniem
    • no gala (3) - atlasiet 3. līdz pēdējā bērna elementu
    • viss, bet (3) - atlasiet visus bērnus, izņemot 3. vietu
    • vienādi (3, 12) - atlasiet visus pat bērnus starp 3. un 12. elementiem

    Ir vairāki desmiti, kurus varat pārlūkot, un katram ir demo, lai palīdzētu jums vizualizēt, kā viņi strādā.

    Daži uzlaboti maisījumi paļauties uz daudzuma vaicājumiem kas izvēlas elementus, kas ir “vismaz” vai “ne vairāk kā” fiksēts noteiktā diapazonā. Piemēram, varat izvēlēties visus bērnus vecākiem elementiem, kuriem ir vismaz 5 bērni (vai vairāk).

    Šīs idejas var būt mulsinošas, lasot par tām, bet dzīvot demonstrācijas tiešām padara to visu kristāldzidru.

    Lai izrakt, jūs varat lejupielādējiet kopiju no šīs Mixin bibliotēkas no GitHub repo kopā ar visiem šiem demo. Un jūs varat dalīties savās domās vai jautājumos ar projekta veidotāju Twitter @ LukyVJ.