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.
Tabla de contenido
¿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 en el formato .css 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 de CSS como LessCSS en su proyecto.
Cómo funciona Stylus CSS
Para instalar Stylus en su entorno local, necesita Node.js y Node Package Manager (NPM) o Yarn instalados en su máquina. Ejecute el siguiente comando de terminal:
npm install stylus
O:
yarn add stylus
Cada archivo Stylus CSS termina con una extensión .styl. Una vez que haya escrito su código Stylus CSS, puede compilarlo con este comando:
stylus .
Esto debería compilar todos los archivos .styl y generar archivos .css en el directorio actual. El compilador Stylus también permite compilar archivos .css en .styl con el indicador –css. Para convertir un archivo .css al formato .styl, use este comando:
stylus --css style.css style.styl
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:
.container
margin: 10px
El bloque de código anterior se compila en el siguiente CSS:
.container {
margin: 10px;
}
Al igual que en los preprocesadores de CSS como Less, puede hacer referencia a un selector principal con el carácter &:
button
color: white;
&:hover
color: yellow;
Que compila a:
button {
color: #fff;
}button:hover {
color: #ff0;
}
Cómo usar variables en Stylus CSS
En los preprocesadores de CSS como Less CSS, define variables con el carácter @, 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 vincularla a un valor:
bg-color = black
Ahora puede usar la variable en el archivo .styl de esta manera:
div
background-color: bg-color
Los bloques de código anteriores se compilan en el siguiente CSS:
div {
background-color: #000;
}
Puede definir una variable nula con paréntesis. Por ejemplo:
empty-variable = ()
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:
element-width = 563pxdiv
width: element-width
height : (element-width / 2)
Eso funcionaría, pero también puede evitar crear la variable por completo y hacer referencia al valor de la propiedad de ancho en su lugar:
div
width: 563px
height: (@width / 2)
En este bloque de código, el símbolo @ le permite hacer referencia a la propiedad de ancho real en el div. Independientemente del enfoque que elija, cuando compile el archivo .styl, debería obtener el siguiente CSS:
div {
width: 563px;
height: 281.5px;
}
Funciones en Stylus CSS
Puede crear funciones que devuelvan valores en Stylus CSS. Supongamos que desea establecer la propiedad de alineación de texto de un div en «centro» si el ancho es superior a 400 px, o «izquierda» si el ancho es inferior a 400 px. Puede crear una función que maneje esta lógica.
alignCenter(n)
if (n > 400)
'center'
else if (n < 200)
'left'div {
width: 563px
text-align: alignCenter(@width)
height: (@width / 2)
}
Este bloque de código llama a la función alignCenter, pasando el valor de la propiedad de ancho al hacer referencia a él con el símbolo @. La función alignCenter verifica si su parámetro, n, es mayor que 400 y devuelve «center» si lo es. Si n es menor que 200, la función devuelve «izquierda».
Cuando se ejecuta el compilador, debe producir el siguiente resultado:
div {
width: 563px;
text-align: 'center';
height: 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:
subtract(b:30px, a:10px)
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.