es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


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.

Cómo refactorizar CSS: una guía

Cómo refactorizar CSS: una guía

La refactorización CSS debe ser una parte esencial del flujo de trabajo de desarrollo de front-end, si queremos tener una base de código manejable y optimizada. Cuando refactorizamos CSS, limpiamos y reorganizamos nuestro código existente sin agregar ninguna característica nueva o corregir errores.La

(Consejos de tecnología y diseño)

¿Las herramientas de limpieza de RAM realmente ayudan?

¿Las herramientas de limpieza de RAM realmente ayudan?

Si no tienes suficiente "RAM" en tu PC, entonces debes haber intentado (o pensado intentar) una herramienta de limpieza de RAM que prometa "liberar" RAM rápidamente.¿Te has preguntado alguna vez cómo funcionan la limpieza y los incrementos rápidos en la memoria RAM ? ¿Cómo liberan estas herramientas la RAM? ¿Asi

(Consejos de tecnología y diseño)