Pagrindinis » Kodavimas » Automatizuokite n-vaiko pasirinktuvus su „Family.scss Mixins“

    Automatizuokite n-vaiko pasirinktuvus su „Family.scss Mixins“

    Sass yra geriausias būdas valdyti šiuolaikinę CSS ir mišrių bibliotekų plėtros metu gali sutaupyti dar daugiau laiko.

    Šie mišiniai veikia kaip automatizuoti kodai ar funkcijos skambinate pagrindiniuose „Sass“ failuose. Kai kurie mišiniai yra bendresni, o kiti yra labai specifiniai, pvz Family.scss biblioteka.

    Ši nemokama biblioteka siūlo 26 mišiniai veikia kompleksas : n-os vaikas selektorių nepamirštant viso kodo.

    Dauguma kūrėjų žino apie : n-os vaikas pasirinktuvas ir pagal nutylėjimą, tai tikrai nėra sudėtinga. Jūs tiesiog perduoti skaitmeninį selektorių, pavyzdžiui : n-vaikas (2) kur priklausomybės stiliaus taisyklės taikomos kiekvienam antrajam pagrindinio elemento vaikui.

    Tačiau, jei norite pasirinkti, tai gali būti daug sudėtingesnė dinaminiai elementai (pvz., pirmasis ir paskutinis) arba kai norite pasirinkti a nedidelė dalis elementų (pvz., pirmieji trys vaikai).

    Čia gali padėti Family.scss. Tai labai maža biblioteka ir jame yra 26 vaikų pasirinkimo sprendimų nuo pagrindinio iki super komplekso. Kiekviename mišinyje pagrindiniame puslapyje yra demonstracija, kurią galite naršyti ir filtruoti.

    Stai keleta įdomių pavyzdžių parodyti, ką ši biblioteka gali padaryti:

    • po pirmojo (5) - po pirmųjų 5 vaikų pasirinkite visus elementus
    • nuo pabaigos (3) - pasirinkite 3 - paskutinį vaiko elementą
    • viskas, bet (3) - pasirinkite visus vaikus, išskyrus trečiąjį
    • tolygiai (3, 12) - pasirinkite visus net vaikus tarp 3 ir 12 elementų

    Yra dešimčių daugiau, kuriuos galite naršyti, ir kiekvienas turi demo, kad padėtų jums suprasti, kaip jie veikia.

    Keletas pažangių mišinių pasikliauti kiekio užklausomis kad pasirinktų elementus “bent jau” arba “labiausiai” pritvirtintas prie tam tikro diapazono. Pavyzdžiui, galite pasirinkti visus vaikus tėvų elementams, kuriuose yra mažiausiai 5 vaikai (arba daugiau).

    Šios idėjos gali būti painios skaitydami apie jas, bet gyvi demo iš tikrųjų padaryti jį visiškai aišku.

    Įkvėpti galite atsisiųskite kopiją iš šios „GitHub“ repo bibliotekos ir visų šių demo. Ir galite pasidalinti savo mintimis ar klausimais su projekto kūrėju „Twitter @LukyVJ“.