Az n-edik gyermek kiválasztása a Family.scss Mixins segítségével
Sass a legjobb módja a modern CSS és mixin könyvtárak még több időt takaríthat meg a fejlesztési ciklus során.
Ezek a keverékek hasonlóak automatizált kódok vagy funkciók hogy a Sass fő fájljait hívja. Néhány keverék általánosabb, míg mások nagyon specifikusak, mint például a Family.scss könyvtár.
Ez az ingyenes könyvtár kínál 26 keverék futáshoz összetett : N-ed gyermek szelektor anélkül, hogy elfelejtené a kódot.
A legtöbb fejlesztő ismeri a : N-ed gyermek választó és alapértelmezés szerint ez nem bonyolult. Egyszerűen adja át a numerikus választót, például : N-ed gyerek (2) ahol a hozzátartozó stílus szabályai a szülőelem minden második gyermekére vonatkoznak.
Ez azonban sokkal összetettebb lehet, ha kiválasztani szeretné dinamikus elemek (például az első és az utolsó) vagy a kis maroknyi elem (például az első három gyermek).
Itt segíthet a Family.scss. Ez egy nagyon kicsi könyvtár, és 26 megoldást tartalmaz a gyermekek kiválasztására az alaptól a szuper komplexig terjed. Minden mixinnek van egy bemutatója a honlapon, amelyet böngészhet és szűrhet, ha szükséges.
Itt van néhány érdekes példák megmutathatja, mit tehet a könyvtár:
utáni első (5)- az első 5 gyermek után válassza ki az összes elemeta végén (3)- válassza ki a 3.-től utolsó gyermekelemetALL-de (3)- a 3. kivételével kiválaszthatja az összes gyereketegyenletes (3, 12)- válassza ki az összes gyermeket a 3. és 12. elem között
Több tucat van, amellyel böngészhet, és mindegyikük rendelkezik demóval, amelyek segítenek megjeleníteni, hogyan működik.
Néhány fejlett keverék támaszkodni mennyiségi lekérdezésekre olyan elemeket választanak, amelyek “legalább” vagy “leginkább” meghatározott tartományba van rögzítve. Például kiválaszthatja az összes olyan szülőelemet, amelynek legalább 5 gyermeke van (vagy több).
Ezek az ötletek zavaróak lehetnek, ha róluk olvasnak, de a élő demók tényleg kristálytiszta.
Ahhoz, hogy ásni tudj, tudod töltse le a másolatot ennek a mixin könyvtárnak a GitHub repo-jából, az összes demóval együtt. És megoszthatja gondolatait vagy kérdéseit a projekt létrehozójával a Twitter @LukyVJ-en.
