Automatice selectores nth-child con Family.scss Mixins
Hablar con descaro a Es la mejor manera de administrar CSS moderno y bibliotecas mixtas Puede ahorrar aún más tiempo durante el ciclo de desarrollo.
Estos mixins funcionan como códigos o funciones automatizadas que llamas en tus archivos principales de Sass. Algunos mixins son más generales mientras que otros son muy específicos como el Biblioteca family.scss.
Esta biblioteca gratuita ofrece 26 mixins para correr complejo : nth-child selectores sin memorizar todo ese código.
La mayoría de los desarrolladores conocen la : nth-child Selector y por defecto, ciertamente no es complicado. Tu simplemente pasar un selector numérico, por ejemplo : nth-child (2) donde las reglas de estilo de pertenencia se aplican a cada segundo hijo del elemento padre.
Sin embargo, esto puede ser mucho más complejo cuando se quiere seleccionar elementos dinámicos (como primero y último) o cuando desea seleccionar un pequeño puñado de elementos (como los tres primeros hijos).
Aquí es donde Family.scss puede ayudar. Es una biblioteca muy pequeña y contiene 26 soluciones para selectores de niños. que van desde lo básico a lo super complejo. Cada mezcla tiene una demostración en la página de inicio, que puede navegar y filtrar según sea necesario.
Aquí están algunas ejemplos interesantes para mostrar lo que esta biblioteca puede hacer:
después de primero (5)- Selecciona todos los elementos después de los primeros 5 hijos.desde el final (3)- Seleccione el 3er al último elemento hijotodo menos 3- Selecciona todos los niños excepto el 3er.incluso entre (3, 12)- Selecciona todos los niños pares entre los elementos 3 y 12.
Hay docenas más por las que puedes navegar y cada una tiene demostraciones para ayudarte a visualizar cómo funcionan..
Unos cuantos mixins avanzados. confiar en consultas de cantidad que recogen elementos que son “al menos” o “a lo sumo” fijado a un cierto rango. Por ejemplo, puede seleccionar todos los elementos secundarios para elementos principales que tengan al menos 5 elementos secundarios (o más).
Estas ideas pueden ser confusas al leer sobre ellas, pero demostraciones en vivo realmente lo hace todo muy claro.
Para cavar, puedes descargar una copia de esta biblioteca de mezclas del repositorio de GitHub, junto con todas estas demostraciones. Y, puede compartir sus pensamientos o preguntas con el creador del proyecto en Twitter @LukyVJ.
