Автоматизуйте селектори nth-child з Family.scss Mixins
Сасс - це найкращий спосіб керування сучасними CSS і бібліотеки може заощадити ще більше часу протягом циклу розробки.
Ці суміші працюють як автоматизовані коди або функції ви називаєте у своїх основних файлах Sass. Деякі суміші є більш загальними, а інші дуже специфічними, наприклад Бібліотека Family.scss.
Це безкоштовна бібліотека 26 сумішей для запуску складний : n-й дитина селекторів без запам'ятовування всього цього коду.
Більшість розробників знають про : n-й дитина Селектор і за замовчуванням, звичайно, не складний. Ви просто пропустити цифровий селектор, наприклад : n-та дитина (2) \ t де відповідні правила стилю застосовуються до кожного другого дочірнього елемента батьківського елемента.
Однак, це може стати набагато складнішим, якщо потрібно вибрати динамічні елементи (наприклад, перше та останнє) або коли потрібно вибрати маленька жменька елементів (наприклад, перших трьох дітей).
Саме тут Family.scss може допомогти. Це дуже невелика бібліотека і містить 26 рішень для дочірніх селекторів від базового до надкомплексного. Кожен mixin має демо-версію на домашній сторінці, яку ви можете переглядати та фільтрувати за потребою.
Ось деякі цікаві приклади показати, що може робити ця бібліотека:
після першого (5)- виберіть всі елементи після перших 5 дітейз-кінця (3)- виберіть третій до останнього дочірній елементвсе-але (3)- виберіть усіх дітей, окрім третьогорівномірний (3, 12)- виберіть всі діти між 3-м і 12-м елементами
Є ще десятки, які ви можете переглядати, і кожен з них має демо-версії, які допоможуть вам уявити, як вони працюють.
Кілька просунутих сумішей покладатися на кількість запитів що вибирають елементи, які є “принаймні” або “максимум” фіксований до певного діапазону. Наприклад, можна вибрати всіх дітей для батьківських елементів, які мають щонайменше 5 дітей (або більше).
Ці ідеї можуть збивати з пантелику при читанні про них, але живі демонстрації дійсно зробіть це все кришталево ясно.
Щоб закопатися, можна завантажити копію цієї бібліотеки mixin з репо GitHub, разом з усіма цими демонстраціями. І ви можете поділитися своїми думками або питаннями з творцем проекту на Twitter @LukyVJ.
