Tutorial

12 artículos

Reutiliza tu código en React usando mixins

En el anterior artículo sobre React vimos cómo hacer el frontend de un chat. Terminamos el chat, pero dejamos un paso sin hacer. En este artículo veremos qué son los mixins y cómo hacer que se

Comenzando con React

React es una librería de Javascript creada por los desarrolladores de Facebook para construir interfaces de usuario de forma modular. Su principal característica es su capacidad para hacer cambios en el DOM de la página de

Cómo funciona y cuándo es recomendable usar @extend en Stylus

La directiva @extends de Stylus permite heredar estilos de un selector en otro. Puede ser útil cuando tenemos un elemento con los mismos estilos que otro ya definido. Al segundo elemento le decimos que extienda del

Mediaqueries en Stylus

Al trabajar con preprocesadores, hacer mediaqueries no supone ningún problema. No hay ninguna diferencia entre usar CSS o usar un preprocesador. Sin embargo, ya que estamos usando preprocesadores, podrían ayudarnos un poco. Para ello crearemos un

Componentes y módulos de CSS con Stylus

Gracias a los preprocesadores de CSS es muy sencillo modularizar nuestro código separándolo en múltiples archivos, dejando que cada uno defina estilos de un componente de nuestro sitio. Tener cada elemento separado en un archivo nos

Nib, una librería de mixins para Stylus

En el primer artículo de este tutorial explicamos cómo usar Nib en Stylus. Ahora nos centraremos en para qué sirve y cómo utilizar algunas de sus funciones. ¿Para qué sirve Nib? Nib se conoce como un

Mixins avanzados en Stylus

Anteriormente hemos visto lo básico sobre mixins y funciones en Stylus. Pero se pueden construir mixins más complejos utilizando algunas propiedades que nos ofrece Stylus. Añadir prefijos propietarios con mixins Cuando queremos añadir los prefijos propietarios

Tutorial de Stylus

Índice del tutorial de Stylus. ¿Qué es un preprocesador de CSS? Cómo usar Stylus desde la terminal Sintaxis, anidación, comentarios, variables y operadores básicos Condicionales y bucles Mixins y funciones Mixins avanzados Nib, una librería de

Mixins y funciones en Stylus

En Stylus, las funciones y los mixins se declaran de la misma forma. La principal diferencia es que los mixins se comportan como si fuesen declaraciones de CSS. Las funciones, sin embargo, pueden devolver un valor.

Tutorial de Stylus: Condicionales y bucles

En Stylus los condicionales y los bucles funcionan de la misma forma que en otros muchos lenguajes. Sin embargo, Stylus nos ofrece algunas alternativas en cuanto a su sintaxis. Condicionales Un condicional nos permite evaluar una

Tutorial de Stylus: Sintaxis, anidación, comentarios, variables y operadores

En el anterior artículo vimos cómo usar los comandos de Stylus desde la consola, y un pequeño apunte de cómo era su sintaxis. A continuación explicaré de forma detallada los elementos básicos que nos ofrece Stylus.

Tutorial de Stylus: No temas a la terminal

En el anterior artículo hablé sobre qué es un preprocesador de CSS. Si no tienes claro qué es o por qué es bueno usarlos léelo antes. Este artículo será el primero de una serie de artículos