Automatisieren: N-Kind-Selektoren mit Family.scss Mixins

Sass ist der beste Weg, um modernes CSS zu verwalten und Mixin-Bibliotheken können während des Entwicklungszyklus noch mehr Zeit sparen.

Diese Mixins funktionieren wie automatisierte Codes oder Funktionen, die Sie in Ihren Haupt-Sass-Dateien aufrufen. Einige Mixins sind allgemeiner, während andere sehr spezifisch sind, wie die Family.scss-Bibliothek .

Diese kostenlose Bibliothek bietet 26 Mixins zum Ausführen von komplexen :nth-child Selektoren, ohne den ganzen Code zu merken.

Die meisten Entwickler kennen den :nth-child Selector und standardmäßig ist es sicherlich nicht kompliziert. Sie übergeben einfach einen numerischen Selektor, zum Beispiel :nth-child(2) wobei die zugehörigen Stilregeln für jedes zweite untergeordnete Element des übergeordneten Elements gelten.

Dies kann jedoch sehr viel komplexer werden, wenn Sie dynamische Elemente (wie zum Beispiel das erste und das letzte) auswählen oder eine kleine Handvoll Elemente auswählen möchten (z. B. die ersten drei untergeordneten Elemente ).

Hier hilft Family.scss. Es ist eine sehr kleine Bibliothek und es enthält 26 Lösungen für Kinderselektoren von Basic bis Super-Komplex . Jeder Mix hat eine Demo auf der Homepage, die Sie nach Bedarf durchsuchen und filtern können.

Hier sind einige interessante Beispiele, um zu zeigen, was diese Bibliothek leisten kann:

• after-first(5) - wähle alle Elemente nach den ersten 5 Kindern aus
• from-end(3) - Wählen Sie das 3. bis letzte Element
• all-but(3) - wähle alle Kinder außer dem 3. aus
• even-between(3, 12) - wählt alle geraden Kinder zwischen den 3. und 12. Elementen aus

Es gibt Dutzende mehr, die Sie durchsuchen können, und sie haben jeweils Demos, die Ihnen helfen, sich vorzustellen, wie sie funktionieren.

Einige fortgeschrittene Mixins verlassen sich auf Quantitätsabfragen, die Elemente auswählen, die "mindestens" oder "höchstens" auf einen bestimmten Bereich festgelegt sind. Sie können beispielsweise alle untergeordneten Elemente für übergeordnete Elemente auswählen, die mindestens 5 untergeordnete Elemente (oder mehr) enthalten.

Diese Ideen können beim Lesen über sie verwirrend sein, aber die Live-Demos machen es wirklich klar.

Zum Ausgraben können Sie eine Kopie dieser Mixin-Bibliothek aus dem GitHub-Repo zusammen mit all diesen Demos herunterladen . Und Sie können Ihre Gedanken oder Fragen mit dem Ersteller des Projekts auf Twitter @LukyVJ teilen.