8

Aprende qué es Stylus y cómo instalarlo

838Puntos

hace 8 años

¿Qué es Stylus?

Stylus es un pre-procesador de CSS que nace de la necesidad de optimizar nuestras hojas de estilo. Gracias a sus características y funcionalidades, podemos eliminar las limitaciones que trae consigo CSS y olvidarnos de esas tareas repetitivas, complejas y frustrantes a las que estábamos acostumbrados.

Las principales características de Stylus son:

  • Ofrece todas las capacidades de un pre-procesador estándar
  • Paréntesis, llaves, comas, puntos y comas son opcionales
  • Uso de variables
  • Mixins y una librería llamada nib que hace más poderosa esta función
  • Uso de funciones
  • Funciones aritméticas
  • Selectores anidados
  • Compresión de CSS
  • JavaScript API
  • Y muchas más características que podrás encontrar en su página web aquí.

¡Vamos a la acción!

Para instalar Stylus en nuestro equipo, debemos tener una instalación previa de Node,js, pues está basado en el mismo.

Ingresamos a la página de Node,js, donde encontraremos la versión para Windows, Mac y Linux.

dowloadnodejs pagina inicial

Después de Node,js pasaremos a instalar Stylus.

  • Abrimos una terminal de Windows y nos dirigimos a la carpeta de Node,js (Program Files).
  • Escribimos la siguiente línea: npm install stylus –g
  • Luego, para verificar que esté instalado correctamente escribimos: npm –v

En la siguiente imagen se describe el proceso:

Consola CMD windows

¡La instalación de Stylus ha sido todo un éxito!

Ahora realizaremos una prueba.

  • Inicialmente creé un archivo con extensión styl llamado (Estilo.styl) con el siguiente código:
bodyfont14px/1.5 Helvetica, arial, sans-serif 

buttonbutton.buttoninput[type='button'] input[type='submit'] 
     border-radius5px
  • Abrí nuevamente mi consola de Windows y me dirigí a la carpeta donde tenía el archivo (Estilo.styl)
  • Para compilar mi archivo debo escribir en mi consola de Windows el código: “stylus estilo.styl” De esta forma, Stylus me genera un nuevo archivo con extensión .CSS
Compilacion

Que se verá de la siguiente forma:

body { 
    font: 14px/1.5 Helvetica, arial, sans-serif; 
} 

bodybutton, bodybutton.button, bodyinput[type='button'], bodyinput[type='submit'] {
    border-radius: 5px; 
} 

Este es un ejemplo básico en el que podemos apreciar el poder que tiene Stylus como pre-procesador. Aunque, para empezar a utilizarlo, lo ideal sería tener un grado medio/alto de experiencia con CSS; para no cometer errores o desesperarnos en el proceso.

¡Stylus tiene mucho más! ¿Quieres aprender a hacer mixins, variables y funciones? Vamos a aprenderlo todo en nuevo curso de Stylus en Platzi.

Escribe tu comentario
+ 2
1
5426Puntos

Alguien tiene una solución al siguiente problema al instalar Stylus en Windows:

C:\program files\nodejs> npm install stylus -g
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
C:\Users\Alfonso Cardenas\AppData\Roaming\npm\stylus -> C:\Users\Alfonso Cardenas\AppData\Roaming\npm\node_modules\stylus\bin\stylus