Автоматизируйте селекторы nth child с помощью Mixins Family.scss
пререкаться это лучший способ управлять современным CSS и смешанные библиотеки может сэкономить еще больше времени в течение цикла разработки.
Эти миксины работают как автоматизированные коды или функции что вы называете в своих основных файлах Sass. Некоторые миксины являются более общими, в то время как другие очень специфичны, такие как Библиотека Family.scss.
Эта бесплатная библиотека предлагает 26 смесей для бега сложный : П-й ребенок селекторы не запоминая весь этот код.
Большинство разработчиков знают о : П-й ребенок селектор и по умолчанию это конечно не сложно. Ты просто передать числовой селектор, например : П-й ребенок (2) где правила стиля принадлежности применяются к каждому второму дочернему элементу родительского элемента.
Тем не менее, это может быть гораздо сложнее, когда вы хотите выбрать динамические элементы (например, первый и последний) или когда вы хотите выбрать маленькая горстка элементов (например, первые трое детей).
Здесь Family.scss может помочь. Это очень маленькая библиотека, и она содержит 26 решений для дочерних селекторов от базового до супер сложного. Каждый миксин имеет демо на главной странице, которую вы можете просматривать и фильтровать по мере необходимости.
Вот некоторые интересные примеры чтобы показать, на что способна эта библиотека:
после того, как первая (5)- выбрать все элементы после первых 5 детейиз-конца (3)- выберите третий до последнего дочернего элементавсе, но (3)- выбрать всех детей, кроме 3-гочётный (3, 12)- выбрать все четные дети между 3-м и 12-м элементами
Есть еще десятки, которые вы можете просмотреть, и у каждого из них есть демонстрации, которые помогут вам визуализировать, как они работают..
Несколько продвинутых миксинов полагаться на количество запросов которые выбирают элементы, которые “по крайней мере” или же “в большинстве” фиксируется в определенном диапазоне. Например, вы можете выбрать все дочерние элементы для родительских элементов, которые имеют как минимум 5 дочерних элементов (или более).
Эти идеи могут сбивать с толку при чтении о них, но живые демо действительно сделать все кристально чистым.
Закопаться можно скачать копию этой библиотеки mixin из репозитория GitHub, вместе со всеми этими демонстрациями. И вы можете поделиться своими мыслями или вопросами с создателем проекта в Твиттере @LukyVJ.
