Automatice: selectores n-child con Family.scss Mixins

Sass es la mejor manera de administrar CSS modernos y las bibliotecas mixin pueden ahorrar aún más tiempo durante el ciclo de desarrollo.

Estos mixins funcionan como códigos automáticos o funciones a las que llamas en tus archivos Sass principales. Algunas mezclas son más generales, mientras que otras son muy específicas, como la biblioteca Family.scss .

Esta biblioteca gratuita ofrece 26 mixins para ejecutar complejos :nth-child selectores :nth-child sin memorizar todo ese código.

La mayoría de los desarrolladores conocen el selector :nth-child y, por defecto, no es complicado. Simplemente pase un selector numérico, por ejemplo :nth-child(2) donde las reglas de estilo de pertenencia se aplican a cada segundo elemento secundario del elemento principal.

Sin embargo, esto puede volverse mucho más complejo cuando desee seleccionar elementos dinámicos (como el primero y el último) o cuando desee 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 básicos hasta súper complejos . Cada Mixin tiene una demostración en la página de inicio, que puede explorar y filtrar según sea necesario.

Aquí hay algunos ejemplos interesantes para mostrar lo que esta biblioteca puede hacer:

• after-first(5) - selecciona todos los elementos después de los primeros 5 niños
• from-end(3) - selecciona el tercer elemento hasta el último elemento hijo
• all-but(3) : seleccione todos los niños excepto el tercero
• even-between(3, 12) - selecciona todos los elementos pares entre los elementos 3 y 12

Hay docenas más que puedes explorar y cada uno tiene demos para ayudarte a visualizar cómo funcionan.

Algunas mixins avanzadas se basan en consultas de cantidad que eligen elementos que están "al menos" o "como máximo" fijados en un cierto rango. Por ejemplo, puede seleccionar todos los elementos secundarios para hijos que tengan al menos 5 hijos (o más).

Estas ideas pueden ser confusas al leer sobre ellas, pero las demostraciones en vivo realmente lo aclaran todo.

Para profundizar, puede descargar una copia de esta biblioteca mixin del repositorio de GitHub, junto con todas estas demostraciones. Y puede compartir sus pensamientos o preguntas con el creador del proyecto en Twitter @LukyVJ.