de.hideout-lastation.com
Paradies Für Designer Und Entwickler


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.

15 Lektionen "The Art of War" lehrt Sie über das Gewinnen von Life Battles

15 Lektionen "The Art of War" lehrt Sie über das Gewinnen von Life Battles

Die Kunst des Krieges von Sun Tzu wird von vielen als nicht nur eine "Bibel" für das Schlachtfeld angesehen, sondern auch als eine große Quelle von Lehren für das Leben im Allgemeinen. Das Leben an sich ist ein ständiger Kampf dafür, wenn wir nicht an der Spitze bleiben, es zumindest durch tägliche Herausforderungen zu schaffen, während wir das Beste aus unseren Ressourcen machen .Abhäng

(Tech- und Design-Tipps)

Google AutoDraw - AI Autokorrektur, die Ihr Scribble korrigiert

Google AutoDraw - AI Autokorrektur, die Ihr Scribble korrigiert

Zeichnen kann schwierig sein, besonders wenn du jemand bist wie ich, der absolut kein künstlerisches Talent hat. Aber wenn Sie einfach mit einem einfachen Doodle mitkommen möchten, können Sie Googles neuestes künstliches Intelligenz-Experiment AutoDraw für Sie zeichnen lassen.Basierend auf der gleichen Technologie wie Google Quick, Draw !, is

(Tech- und Design-Tipps)