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.

Schaufenster der schönen Regierung Websites

Schaufenster der schönen Regierung Websites

Die Regierungen sind wahrscheinlich eine der frühesten Organisationen, die im Internet ihre Spuren hinterlassen haben. Sie sind jedoch auch einer der Körper, die weniger vorzeigbare Website haben. Die Ironie ist, dass von allen Bereichen, die im Internet auftauchen, die Regierung die Partei sein sollte, die vor den anderen eine anständige Website hat, weil das Vorhandensein einer Regierungswebsite der Öffentlichkeit Informationen und Bequemlichkeit bietet. Wi

(Tech- und Design-Tipps)

Wie man gute Benutzererfahrung in 20 einfachen Schritten ruiniert

Wie man gute Benutzererfahrung in 20 einfachen Schritten ruiniert

Jeden Tag greifen wir auf eine Reihe neuer oder bekannter Seiten zu und stoßen auf verschiedene Erfahrungen. Manchmal haben Sie vielleicht angenehme und durchschnittliche, aber wenn Sie unglücklich sind, bekommen Sie geradezu schreckliche Erfahrung. Was macht eine Erfahrung besser als eine andere? Eine Seite muss nicht der Gipfel eines erstaunlichen Designs sein, sie muss nicht mehr Informationen haben als Wikipedia, alles was sie braucht (und nicht unterschätzt, wie schwierig das ist) ist eine gute Benutzererfahrung .Je

(Tech- und Design-Tipps)