Koduleht » Kodeerimine » Automatiseeri n-lapse valijad koos Family.scss Mixins'iga

    Automatiseeri n-lapse valijad koos Family.scss Mixins'iga

    Sass on parim viis kaasaegse CSS ja mixin raamatukogud võib arengutsükli jooksul veelgi rohkem aega säästa.

    Need segud töötavad nagu automatiseeritud koodid või funktsioonid peamised Sass-failid. Mõned segud on üldisemad, samas kui teised on väga spetsiifilised, näiteks Family.scss raamatukogu.

    See tasuta raamatukogu pakub 26 segu töötab keeruline : n. laps selektorid kogu seda koodi meelde jätmata.

    Enamik arendajaid teavad : n. laps Valik ja vaikimisi pole see kindlasti keeruline. Sa lihtsalt läbib numbrivalija, näiteks : n-laps (2) kus perekonnaseisu reeglid kehtivad iga vanema elemendi iga teise lapse kohta.

    Kuid see võib saada palju keerulisemaks, kui soovite seda valida dünaamilised elemendid (näiteks esimene ja viimane) või kui soovite valida a väike käputäis elemente (näiteks kolm esimest last).

    Seal saab Family.scss aidata. See on väga väike raamatukogu ja sisaldab 26 lastevalikute lahendust alates põhilisest superkompleksini. Igal mixinil on kodulehel demo, mida saate vajadusel sirvida ja filtreerida.

    Siin on mõned huvitavaid näiteid näidata, mida see raamatukogu saab teha:

    • pärast esimest (5) - vali kõik elemendid pärast esimest 5 last
    • lõpust (3) - valige kolmas kuni viimane lapselement
    • kõik-kuid (3) - vali kõik lapsed peale 3. koha
    • ühtlaselt (3, 12) - valige kõik isegi lapsed 3. ja 12. elemendi vahel

    Veel kümneid saate sirvida ja neil on demod, mis aitavad teil visualiseerida, kuidas nad töötavad.

    Mõned edasijõudnud segad tugineda koguste päringutele mis valivad elemendid, mis on “vähemalt” või “kõige rohkem” fikseeritud teatud vahemikku. Näiteks saate valida kõik lapsed vanematele elementidele, millel on vähemalt 5 last (või rohkem).

    Need ideed võivad nende kohta lugemisel segadust tekitada, kuid live demod tõesti see kõik kristallselge.

    Kaevata saab koopia allalaadimine GitHub repost, koos kõigi nende demodega. Ja saate jagada oma mõtteid või küsimusi projekti loojaga Twitteris @LukyVJ.