Automatisieren Sie nth-child-Selektoren mit Family.scss-Mixins
Sass ist der beste Weg, um moderne CSS und Mixin-Bibliotheken kann im Entwicklungszyklus noch mehr Zeit sparen.
Diese Mixins funktionieren wie automatisierte Codes oder Funktionen dass Sie Ihre Haupt-Sass-Dateien aufrufen. Einige Mixins sind allgemeiner, während andere sehr spezifisch sind, wie das Family.scss-Bibliothek.
Diese kostenlose Bibliothek bietet 26 mixins zum Laufen Komplex : n-te Kind Selektoren ohne all diesen Code zu merken.
Die meisten Entwickler kennen das : n-te Kind Selector und standardmäßig ist es sicherlich nicht kompliziert. Sie einfach übergeben Sie einen numerischen Wähler, zum Beispiel : n-te Kind (2) Dabei gelten die zugehörigen Stilregeln für jedes zweite untergeordnete Element des übergeordneten Elements.
Dies kann jedoch bei der Auswahl sehr viel komplexer werden dynamische Elemente (z. B. first & last) oder wenn Sie eine auswählen möchten kleine Handvoll Elemente (wie die ersten drei Kinder).
Hier kann Family.scss helfen. Es ist eine sehr kleine Bibliothek und enthält 26 Lösungen für untergeordnete Auswähler von einfach bis super komplex. Jedes Mixin hat auf der Homepage eine Demo, die Sie nach Bedarf durchsuchen und filtern können.
Hier sind einige interessante Beispiele um zu zeigen, was diese Bibliothek tun kann:
nach dem ersten (5)- Alle Elemente nach den ersten 5 Kindern auswählenvon ende (3)- Wählen Sie das dritte bis letzte untergeordnete Element ausalles außer aber (3)- Wählen Sie alle Kinder außer dem 3. ausgerade zwischen (3, 12)- Wählen Sie alle untergeordneten Elemente zwischen dem 3. und 12. Element aus
Es gibt Dutzende mehr, die Sie durchblättern können, und jeder hat Demos, die Ihnen helfen zu visualisieren, wie sie funktionieren.
Ein paar fortgeschrittene Mixins sich auf Mengenabfragen verlassen diese Pick-Elemente, die sind “wenigstens” oder “maximal” auf einen bestimmten Bereich festgelegt. Sie können beispielsweise alle untergeordneten Elemente für übergeordnete Elemente auswählen, die über mindestens fünf untergeordnete Elemente verfügen..
Diese Ideen können verwirrend sein, wenn Sie über sie lesen Live-Demos wirklich alles klar machen.
Um hineinzugreifen, kannst du eine Kopie herunterladen dieser Mixin-Bibliothek aus dem GitHub-Repo zusammen mit all diesen Demos. Sie können Ihre Gedanken oder Fragen mit dem Ersteller des Projekts auf Twitter @LukyVJ teilen.
