¿Qué es Stylus CSS y cómo se usa?

Cuando se trata de desarrollo web, la forma más común de diseñar una aplicación es usar CSS. Sin embargo, CSS puede ser engorroso para trabajar porque es notoriamente difícil de depurar.

Aprenda a usar Stylus CSS y tendrá otra opción, con uno de los preprocesadores CSS más populares disponibles.

¿Qué es un preprocesador CSS?

Los preprocesadores de CSS son utilidades que facilitan la escritura de CSS. A menudo compilan código a partir de su propia sintaxis personalizada para el .css formato que los navegadores pueden entender.

Los preprocesadores de CSS como Sass, por ejemplo, ofrecen características especiales como bucles, mixins, selectores anidados y sentencias if/else. Estas características facilitan el mantenimiento de su código CSS, especialmente en equipos grandes.

Para usar un procesador CSS, debe instalar el compilador en su entorno local y/o servidor de producción. Algunas herramientas de creación de interfaz, como Vite, le permiten incluir

Preprocesadores CSS como LessCSS en tu proyecto

Cómo funciona Stylus CSS

Para instalar Stylus en su entorno local, necesita Node.js y Administrador de paquetes de nodos (NPM) o Yarn instalado en su máquina. Ejecute el siguiente comando de terminal:

npm instalar lápiz óptico

O:

hilo agregar lápiz

Cada archivo Stylus CSS termina en un .estilo extensión. Una vez que haya escrito su código Stylus CSS, puede compilarlo con este comando:

lápiz

Esto debería compilar todos los .estilo archivos y salida .css archivos en el directorio actual. El compilador Stylus también permite compilar .css archivos en .estilo con el --css bandera. para convertir un .css archivo a la .estilo formato, use este comando:

lápiz --css estilo.css estilo.estilo

Sintaxis y selectores primarios en Stylus CSS

En CSS tradicional, define un bloque de estilo con llaves; si no se incluyen estos caracteres, los estilos se romperán. En Stylus CSS, el uso de llaves es opcional.

Stylus admite una sintaxis similar a Python, lo que significa que puede definir bloques usando sangrías en su lugar, como esta:

.envase
margen: 10píxeles

El bloque de código anterior se compila en el siguiente CSS:

.envase {
margen: 10píxeles;
}

Al igual que en los preprocesadores de CSS como Less, puede hacer referencia a un selector principal con el & personaje:

botón
color: blanco;
 &:flotar
color: amarillo;

Que compila a:

botón {
color: #fff;
}
botón:flotar {
color: #ff0;
}

Cómo usar variables en Stylus CSS

En los preprocesadores de CSS como Less CSS, define variables con el @ personaje, mientras que CSS tradicional usa "--" para definir una variable.

En Stylus, las cosas son un poco diferentes: no necesita un símbolo especial para definir una variable. En su lugar, simplemente defina la variable usando un signo igual (=) para vincularlo a un valor:

bg-color = negro

Ahora puede utilizar la variable en el .estilo archivo como este:

división
color de fondo: bg-color

Los bloques de código anteriores se compilan en el siguiente CSS:

división {
color de fondo: #000;
}

Puede definir una variable nula con paréntesis. Por ejemplo:

variable vacía = ()

Puede hacer referencia a otros valores de propiedad utilizando el @ símbolo. Por ejemplo, si desea establecer que la altura de un div sea la mitad de su ancho, puede hacer lo siguiente:

ancho de elemento = 563píxeles
división
ancho: ancho de elemento
altura: (ancho de elemento / 2)

Eso funcionaría, pero también puede evitar crear la variable por completo y hacer referencia a la ancho valor de la propiedad en su lugar:

división
ancho: 563píxeles
altura: (@ancho / 2)

En este bloque de código, el @ símbolo le permite hacer referencia a la actual ancho propiedad en el división. Independientemente del enfoque que elija, cuando compila el .estilo archivo, debe obtener el siguiente CSS:

división {
ancho: 563píxeles;
altura: 281.5px;
}

Funciones en Stylus CSS

Puede crear funciones que devuelvan valores en Stylus CSS. Digamos que desea configurar el texto alineado propiedad de un div a "centro" si el ancho es mayor que 400px, o "izquierda" si el ancho es menos de 400px. Puede crear una función que maneje esta lógica.

Alinear al centro(norte)
si (norte > 400)
 'centro'
demássi (norte < 200)
 'izquierda'
división {
ancho: 563píxeles
texto alineado: Alinear al centro(@ancho)
altura: (@ancho / 2)
}

Este bloque de código llama al Alinear al centro función, pasando el ancho valor de la propiedad haciendo referencia a ella con el @ símbolo. El Alinear al centro la función comprueba si su parámetro, norte, es mayor que 400 y devuelve "centro" si lo es. Si norte es menor que 200, la función devuelve "izquierda".

Cuando se ejecuta el compilador, debe producir el siguiente resultado:

división {
ancho: 563píxeles;
texto alineado: 'centro';
altura: 281.5px;
}

En la mayoría de los lenguajes de programación, las funciones asignan parámetros según el orden en que los proporcione. Esto puede provocar errores como resultado de pasar parámetros en el orden incorrecto, lo que es más probable cuantos más parámetros tenga que pasar.

Stylus proporciona una solución: parámetros con nombre. Úselos en lugar de parámetros ordenados cuando llame a una función, como esta:

sustraer(b:30 píxeles, a:10 píxeles)/*-20px*/

Cuándo usar un preprocesador CSS

Los preprocesadores de CSS son utilidades muy poderosas que puede usar para optimizar su flujo de trabajo. Elegir la herramienta adecuada para su proyecto puede ayudar a mejorar su productividad. Si su proyecto necesita solo una pequeña cantidad de CSS, entonces usar un preprocesador de CSS podría ser excesivo.

Si está creando un proyecto grande, quizás como parte de un equipo, que se basa en una gran cantidad de CSS, considere usar un preprocesador. Ofrecen características como funciones, bucles y mixins que facilitan el diseño de proyectos complejos.