Automatyzuj selektory nth-child za pomocą Mixin Family.scss
Sass to najlepszy sposób na zarządzanie nowoczesnym CSS i biblioteki mieszane może zaoszczędzić jeszcze więcej czasu podczas cyklu rozwoju.
Te miksy działają zautomatyzowane kody lub funkcje że dzwonisz w swoich głównych plikach Sass. Niektóre miksy są bardziej ogólne, podczas gdy inne są bardzo specyficzne, takie jak Biblioteka Family.scss.
Ta bezpłatna biblioteka oferuje 26 mieszanek do biegania złożony : n-dziecko selektory bez zapamiętywania całego tego kodu.
Większość programistów wie o : n-dziecko selektor i domyślnie nie jest to z pewnością skomplikowane. Po prostu przekazać selektor numeryczny, na przykład : nth-child (2) gdzie przynależne reguły stylu mają zastosowanie do co drugiego dziecka elementu rodzica.
Może to jednak znacznie bardziej skomplikować, gdy chcesz wybrać elementy dynamiczne (takich jak pierwszy i ostatni) lub gdy chcesz wybrać mała garść elementów (np. troje pierwszych dzieci).
Tutaj właśnie może pomóc Family.scss. Jest to bardzo mała biblioteka i zawiera 26 rozwiązań dla selektorów podrzędnych od podstawowego do super złożonego. Każdy mixin ma demo na stronie głównej, które możesz przeglądać i filtrować według potrzeb.
Oto kilka ciekawe przykłady aby pokazać, co ta biblioteka może zrobić:
po pierwszym (5)- wybierz wszystkie elementy po pierwszych 5 dzieciachod końca (3)- wybierz trzeci do ostatniego elementu potomnegoall-but (3)- wybierz wszystkie dzieci z wyjątkiem trzeciegoparzyste pomiędzy (3, 12)- wybierz wszystkie dzieci nawet pomiędzy elementami 3 i 12
Możesz przeglądać je na dziesiątki, a każdy z nich ma prezentacje, które pomogą Ci zobrazować, jak działają.
Kilka zaawansowanych mieszanek polegać na zapytaniach ilościowych które wybierają elementy, które są “przynajmniej” lub “najbardziej” ustalony do pewnego zakresu. Na przykład możesz wybrać wszystkie dzieci dla elementów nadrzędnych, które mają co najmniej 5 dzieci (lub więcej).
Te pomysły mogą być mylące podczas czytania o nich, ale pokazy na żywo naprawdę sprawią, że wszystko będzie krystalicznie czyste.
Aby to zrobić, możesz pobierz kopię tej biblioteki mixin z repozytorium GitHub wraz ze wszystkimi tymi demami. I możesz podzielić się swoimi przemyśleniami lub pytaniami z twórcą projektu na Twitterze @LukyVJ.
